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 相关文章推荐
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
JavaScript网页定位详解
Jan 13 Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
Aug 26 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
jQuery实现图像旋转动画效果
May 29 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
Dec 18 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
VUE 实现element upload上传图片到阿里云
Aug 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 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
js 动态选中下拉框
2009/11/26 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
2015/03/23 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
js通过classname来获取元素的方法
2016/11/24 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
python实现telnet客户端的方法
2015/04/15 Python
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
Python中实现最小二乘法思路及实现代码
2018/01/04 Python
Python重新加载模块的实现方法
2018/10/16 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
澳大利亚珍珠首饰购物网站:Vayo Pearls
2019/03/11 全球购物
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
高中自我评价分享
2013/12/05 职场文书
证婚人搞笑证婚词
2014/01/10 职场文书
幼儿园辞职书
2015/02/26 职场文书
公司管理制度范本
2015/08/03 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
数学复习课教学反思
2016/02/18 职场文书
八年级历史教学反思
2016/02/19 职场文书
Python机器学习之基于Pytorch实现猫狗分类
2021/06/08 Python
sql server 累计求和实现代码
2022/02/28 SQL Server
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫
Android 中的类文件和类加载器详情
2022/06/05 Java/Android