Jquery插件之密码强度检测:passwordStrength
2013-09-29 13:35
323 查看
我们设定密码强度等级为10,制作一张图片表示每个等级状态,给密码框绑定keyup事件,通过keyup事件获取密码值,然后使用正则进行判断密码强度等级,然后变换相应的图片。
使用很简单。
在在查看演示DEMO下载源码
注意:id#passwordStrengthDiv的DIV是用来加载强度图片的,你也可以自定义ID,但调用时就要给参数赋值:
使用很简单。
$('#pass').passwordStrength();
在在查看演示DEMO下载源码
创建如下html代码:
<p><label>请输入密码:</label> <input type="password" id="pass" class="input" /></p> <div id="passwordStrengthDiv" class="is0"></div> <p><label>确认密码:</label> <input type="password" id="repass" class="input" /></p>
注意:id#passwordStrengthDiv的DIV是用来加载强度图片的,你也可以自定义ID,但调用时就要给参数赋值:
targetDiv : '#ID' //自定义加载图片的ID
载入JS和CSS:
<link rel="stylesheet" type="text/css" href="style/main.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.passwordStrength.js"></script>
<script type="text/javascript">
$(function(){$('#pass').passwordStrength();});
</script>
相关文章推荐
- 提交表单,提示用户等待 ajax,jquery
- phonegap+jQuery Mobile开发应用
- jQuery data(key, value)函数 在匹配的元素上随心所欲的存放数据
- jQuery中foreach的continue和break
- [JS & JQUERY] 60个JSP免豆资料(教程+源码)下载地址汇总
- [JS & JQUERY] 39个jQvery免豆资料地址汇总
- [JS & JQUERY] 82个Javascript免豆资料下载地址汇总
- jquery easyui datagrid toolbar 按钮动作在ie6下不能实现跳转
- 新款jQuery插件
- JQuery学习系列总结—可编辑的表格
- jQuery MiniUI
- JQuery学习系列总结—可编辑的表格
- JQuery学习系列总结—用户名检测
- JQuery学习系列总结—用户名检测
- jquery 插件收藏其
- Jquery Highcharts 选项配置 说明文档
- 不依赖JQuery的入门Ajax代码
- 从jquery的过滤器.filter()方法想到的
- Jquery选中或取消radio示例
- jquery事件与函数的使用介绍