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 相关文章推荐
ASP Json Parser修正版
Dec 06 Javascript
JavaScript中的property和attribute介绍
Dec 26 Javascript
javascript中数组的sort()方法的使用介绍
Dec 18 Javascript
js中判断用户输入的值是否为空的简单实例
Dec 23 Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 Javascript
深入浅析jQuery对象$.html
Aug 22 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 Javascript
React精髓!一篇全概括小结(急速)
May 23 Javascript
JS实现简易留言板特效
Dec 23 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
vue点击标签切换选中及互相排斥操作
Jul 17 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实现encode64编码类实例
2015/03/24 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
2006/10/19 Javascript
新浪中用来显示flash的函数
2007/04/02 Javascript
ASP SQL防注入的方法
2008/12/25 Javascript
在vs2010中调试javascript代码方法
2011/02/11 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
jquery过滤特殊字符',防sql注入的实现方法
2016/08/17 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
微信小程序实现的一键连接wifi功能示例
2019/04/24 Javascript
BootstrapValidator验证用户名已存在(ajax)
2019/11/08 Javascript
python调用cmd复制文件代码分享
2013/12/27 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
python实现定时发送邮件
2020/12/23 Python
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
客服文员岗位职责
2013/11/29 职场文书
批评与自我批评材料
2014/02/15 职场文书
公司聘任书模板
2014/03/29 职场文书
特教教师先进事迹
2014/05/21 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
银行求职自荐信范文
2015/03/04 职场文书
感恩父母主题班会
2015/08/12 职场文书
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB