javascript密码强度校验代码(两种方法)


Posted in Javascript onAugust 10, 2015

先看效果图:

javascript密码强度校验代码(两种方法)

javascript密码强度校验代码,具体实现思路不多说了,请看下面代码和demo。

第一种方法:

/*
 *密码安全程度 
 *return :全部为字母或者数字,或者密码长度小于
 *return : 字母数字组成,或者字母特殊字符,或者数字和特殊字符
 *return : 字母和数字和特殊字符
 */
 String.prototype.passwordStrength=function(){
 if(this.length> && this.length<=) return ;
 var n = (this.search(/[a-zA-Z]/) != -) ? : ,
 n = (this.search(/[-]/) != -) ? : ,
 n =(this.search(/[\~\`\!\@\#\$\%\^\&\*\(\)\_\+\-\=\[\]|{\}\;\'\:\"\,\.\/\<\>\?]{,}/) != -) ? : ; 
 return n+n+n;
 }

demo

<!doctype html>
 <html>
 <head>
 <meta charset="utf-">
 <title>js密码强度</title>
 <style type="text/css">
 .pw_letter{ margin-top:px; font-size: px; }
 .pw_letter label{float: left; margin-right:px; cursor: default; font-size: px; line-height: px;;}
 .pw_letter span{ float: left; display:inline-block; width:px; height:px; line-height:px; text-align:center; color:#FFF; background-color:#ccc; border-left: px solid #FFF;}
 .pw_letter span.pw_strength_color{ background-color:green;}
 </style>
 </head>
 <body>
 <input id="password" type="password" name="password" placeholder="密码" onKeyUp="setPasswordStrength(this.value.trim())">
 <div class="pw_letter"><label>安全程度</label> <span class="strength">弱</span> <span class="strength">中</span> <span class="strength">强</span> </div>
 <script type="text/javascript">
 /*
 *密码安全程度 
 *return :全部为字母或者数字,或者密码长度小于
 *return : 字母数字组成,或者字母特殊字符,或者数字和特殊字符
 *return : 字母和数字和特殊字符
 */
 String.prototype.passwordStrength=function(){
 if(this.length> && this.length<=) return ;
 var n = (this.search(/[a-zA-Z]/) != -) ? : ,
 n = (this.search(/[-]/) != -) ? : ,
 n =(this.search(/[\~\`\!\@\#\$\%\^\&\*\(\)\_\+\-\=\[\]|{\}\;\'\:\"\,\.\/\<\>\?]{,}/) != -) ? : ; 
 return n+n+n;
 }
 String.prototype.trim = String.prototype.trim || function(){
 return this.replace(/^\s+|\s+$/g,"");
 }
 function setPasswordStrength(pwd){
 var strength_span = document.getElementsByClassName("strength");
 for(var i=; i<strength_span.length; i++){
  strength_span.item(i).className="strength"; 
 }
 for(var i=; i<pwd.passwordStrength(); i++){
  document.getElementsByClassName("strength").item(i).className="strength pw_strength_color";
 } 
 }
 </script>
 </body>

第二种方法:

javascript代码如下:

<script>
function AuthPasswd(string) {
 if(string.length >=6) {
 if(/[a-zA-Z]+/.test(string) && /[0-9]+/.test(string) && /\W+\D+/.test(string)) {
  noticeAssign(1);
 }else if(/[a-zA-Z]+/.test(string) || /[0-9]+/.test(string) || /\W+\D+/.test(string)) {
  if(/[a-zA-Z]+/.test(string) && /[0-9]+/.test(string)) {
  noticeAssign(-1);
  }else if(/\[a-zA-Z]+/.test(string) && /\W+\D+/.test(string)) {
  noticeAssign(-1);
  }else if(/[0-9]+/.test(string) && /\W+\D+/.test(string)) {
  noticeAssign(-1);
  }else{
  noticeAssign(0);
  }
 }
 }else{
 noticeAssign(null); 
 }
}
function noticeAssign(num) {
 if(num == 1) {
 $('#weak').css({backgroundColor:'#009900'});
 $('#middle').css({backgroundColor:'#009900'});
 $('#strength').css({backgroundColor:'#009900'});
 $('#strength').html('很强');
 $('#middle').html('');
 $('#weak').html('');
 }else if(num == -1){
 $('#weak').css({backgroundColor:'#ffcc33'});
 $('#middle').css({backgroundColor:'#ffcc33'});
 $('#strength').css({backgroundColor:''});
 $('#weak').html('');
 $('#middle').html('中');
 $('#strength').html('');
 }else if(num ==0) {
 $('#weak').css({backgroundColor:'#dd0000'});
 $('#middle').css({backgroundColor:''});
 $('#strength').css({backgroundColor:''});
 $('#weak').html('弱');
 $('#middle').html('');
 $('#strength').html('');
 }else{
 $('#weak').html(' ');
 $('#middle').html(' ');
 $('#strength').html(' ');
 $('#weak').css({backgroundColor:''});
 $('#middle').css({backgroundColor:''});
 $('#strength').css({backgroundColor:''});
 }
}
</script>

以上通过两种方法介绍了javascript密码强度校验代码,希望对大家有所帮助。

Javascript 相关文章推荐
js下将字符串当函数执行的方法
Jul 13 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
Mar 04 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
详解vue项目中使用token的身份验证的简单实践
Mar 08 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
js通过循环多张图片实现动画效果
Dec 19 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 #Javascript
jQuery解决input超多的表单提交
Aug 10 #Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 #Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 #Javascript
javascript中caller和callee详解
Aug 10 #Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 #Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 #Javascript
You might like
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2017/10/12 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
微信小程序当前时间时段选择器插件使用方法详解
2018/12/28 Javascript
ES6 Set结构的应用实例分析
2019/06/26 Javascript
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
Python flask框架post接口调用示例
2019/07/03 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
自我鉴定范文300字
2013/10/01 职场文书
班级入场式解说词
2014/02/01 职场文书
一份创业计划书范文
2014/02/08 职场文书
博士毕业生自我鉴定范文
2014/04/13 职场文书
学习雷锋倡议书
2014/04/15 职场文书
大学毕业生推荐信
2014/07/09 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers