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 相关文章推荐
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
Bootstrap表格和栅格分页实例详解
May 20 Javascript
JS中常用的正则表达式
Sep 29 Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
一个简易的js图片轮播效果
Jul 22 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
ES6 Promise对象的含义和基本用法分析
Jun 14 Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 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图片验证码代码
2008/03/27 PHP
php empty()与isset()区别的详细介绍
2013/06/17 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
JavaScript中Date.toSource()方法的使用教程
2015/06/12 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
基于JS实现数字动态变化显示效果附源码
2019/07/18 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
爱游人:Travelliker
2017/09/05 全球购物
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
如何清空Session
2015/02/23 面试题
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫