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学习小结(基础知识)
Nov 10 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
微信小程序 本地存储及登录页面处理实例详解
Jan 11 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 Javascript
JavaScript之DOM_动力节点Java学院整理
Jul 03 Javascript
在小程序中使用canvas的方法示例
Sep 17 Javascript
JS+HTML5 canvas绘制验证码示例
Dec 05 Javascript
js使用文件流下载csv文件的实现方法
Jul 15 Javascript
javascript实现画板功能
Apr 12 Javascript
vue-router的hooks用法详解
Jun 08 Javascript
解决vue项目 build之后资源文件找不到的问题
Sep 12 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数组中删除元素的实现代码
2012/06/22 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
二进制交叉权限微型php类分享
2014/02/07 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
Javascript 构造函数 实例分析
2008/11/26 Javascript
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
2010/04/01 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
python获取网页状态码示例
2014/03/30 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
Python读取实时数据流示例
2019/12/02 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
基于Python爬取搜狐证券股票过程解析
2020/11/18 Python
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
村干部群众路线整改措施思想汇报
2014/10/12 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
k8s部署redis cluster集群的实现
2021/06/24 Redis