passwordStrength 基于jquery的密码强度检测代码使用介绍
更新时间：2011年10月08日 23:15:53 作者：
我们设定密码强度等级为10，制作一张图片表示每个等级状态，给密码框绑定keyup事件，通过keyup事件获取密码值，然后使用正则进行判断密码强度等级，然后变换相应的图片
查看示例：DEMO 打包下载
$('#pass').passwordStrength();
XHTML
<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>
使用很简单。
复制代码 代码如下:
$('#pass').passwordStrength();
XHTML
复制代码 代码如下:
<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>
相关文章
这篇文章主要介绍了jQuery使用jsonp实现百度搜索，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
在github的项目地址里有关于pjax的详细说明和使用方法，这里不再赘述，本文主要是使用中的一些代码记录和使用心得，方便以后查阅快速上手使用。2017-04-04
使用jquery模拟a标签的click事件无法实现跳转的解决
这篇文章主要给大家介绍了关于使用jquery模拟a标签的click事件无法实现跳转的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
juqery 学习之四 筛选过滤函数说明，学习jquery的朋友可以参考下。2010-11-11
进度条和Loading加载动画在当今的网页功能中显得越来越重要了，于是接下来为大家推荐几款比较新颖进度条插件,感兴趣的你可以参考下希望可以帮助到你2013-03-03
这篇文章主要介绍了jQuery中:contains选择器用法,以实例形式分析了:contains选择器的功能、定义及匹配给定元素文本时的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了ztree搜索中多级菜单展示不全的解决方法，需要的朋友参考下吧2017-07-07
这篇文章主要为大家详细介绍了jQuery实现鼠标移入显示蒙版效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
这篇文章主要介绍了jQuery中 $("a").click()无效问题分析,需要的朋友可以参考下2015-01-01
这篇文章主要为大家详细介绍了jQuery实现小火箭返回顶部特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
最新评论