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 相关文章推荐
jquery ready()的几种实现方法小结
Jun 18 Javascript
基于jQuery的图片大小自动适应实现代码
Nov 17 Javascript
JS实现日期加减的方法
Nov 29 Javascript
jQuery实现的经典滑动门效果
Sep 22 Javascript
jquery表单验证需要做些什么
Nov 17 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
jquery使用FormData实现异步上传文件
Oct 25 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
javascript实现函数柯里化与反柯里化过程解析
Oct 08 Javascript
Vue中keep-alive组件的深入理解
Aug 23 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
使用adodb lite解决问题
2006/12/31 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
PHP编写简单的App接口
2016/08/28 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
js实现抽奖效果
2017/03/27 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
微信小程序如何使用globalData的方法
2019/06/06 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
Python中使用dom模块生成XML文件示例
2015/04/05 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
美国美妆网站:B-Glowing
2016/10/12 全球购物
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
优秀毕业生事迹材料
2014/02/12 职场文书
教学质量评估实施方案
2014/03/17 职场文书
廉洁自律承诺书
2014/03/27 职场文书
入职担保书范文
2014/05/21 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
教师先进个人材料
2014/12/17 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android