jQuery Password Validation密码验证


Posted in Javascript onDecember 30, 2016

jQuery Password Validation(密码验证)插件扩展了 jQuery Validate 插件,提供了两种组件:
一种评价密码的相关因素的功能:比如大小写字母的混合情况、字符(数字、特殊字符)的混合情况、长度、与用户名的相似度(可选的)。
一种使用评价功能显示密码强度的验证插件自定义方法。显示的文本可以被本地化。
您可以简单地自定义强度显示的外观、本地化消息显示,并集成到已有的表单中。
该插件目前版本是 1.0.0。

使用方式
如需使用 Password Validation(密码验证)插件,请添加一个 class "password" 到 input,同时添加显示强度的基本标记在表单的需要显示的地方:

<form id="register">
 <label for="password">Password:</label>
 <input class="password" name="password" id="password" />
 <div class="password-meter">
 <div class="password-meter-message"> </div>
 <div class="password-meter-bg">
  <div class="password-meter-bar"></div>
 </div>
 </div>
</form>

对表单应用 Validate 插件:

$(document).ready(function() {
 $("#register").validate();
});

您可以重载 $.validator.passwordRating 实现不同的评价方法。或者重载 $.validator.passwordRating.messages 来提供其他消息,比如本地化。

实例演示

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required to be the same as #other</title>
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">
 
</head>
<body>
<form id="myform">
<label for="password">Password</label>
<input id="password" name="password" />
<br/>
<label for="password_again">Again</label>
<input class="left" id="password_again" name="password_again" />
<br>
<input type="submit" value="Validate!">
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
 debug: true,
 success: "valid"
});
$( "#myform" ).validate({
 rules: {
  password: "required",
  password_again: {
   equalTo: "#password"
  }
 }
});
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 开发中规范性的一点感想
Jun 23 Javascript
js 弹出框 替代浏览器的弹出框
Oct 29 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
Nov 22 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
Nov 25 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
May 10 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
Oct 24 Javascript
Webpack实战加载SVG的方法
Dec 26 Javascript
微信小程序实现蓝牙打印
Sep 23 Javascript
JS实现多选框的操作
Jun 24 Javascript
JS前端使用canvas实现扩展物体类和事件派发
Aug 05 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 #Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 #Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 #Javascript
jQuery+HTML5实现弹出创意搜索框层
Dec 29 #Javascript
Bootstrap3 内联单选和多选框
Dec 29 #Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 #Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 #Javascript
You might like
PHP中用hash实现的数组
2011/07/17 PHP
php中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
php内嵌函数用法实例
2015/03/20 PHP
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
jQuery 全选效果实现代码
2009/03/23 Javascript
javascript 类定义的4种方法
2009/09/12 Javascript
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
js 多浏览器分别判断代码
2010/04/01 Javascript
js 中的switch表达式使用示例
2020/06/03 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
js实现登录与注册界面
2017/11/01 Javascript
Angular4编程之表单响应功能示例
2017/12/13 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
js+html实现周岁年龄计算器
2019/06/25 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
vuex的使用和简易实现
2021/01/07 Vue.js
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
python实现人脸识别代码
2017/11/08 Python
Python读取指定日期邮件的实例
2019/02/01 Python
python如何实现视频转代码视频
2019/06/17 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
django template实现定义临时变量,自定义赋值、自增实例
2020/07/12 Python
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
C#公司笔试题
2014/03/28 面试题
路政管理专业个人自荐信范文
2013/11/30 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
2014年助理工程师工作总结
2014/11/14 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
乌镇导游词
2015/02/02 职场文书
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python
详解Python为什么不用设计模式
2021/06/24 Python