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的文件是什么文件
Dec 06 Javascript
JavaScript中的Window窗口对象
Jan 16 Javascript
javascript 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
JavaScript CSS修改学习第一章 查找位置
Feb 19 Javascript
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 Javascript
jQuery简单实现日历的方法
May 04 Javascript
Vuex简单入门
Apr 19 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
JS浮点数运算结果不精确的Bug解决
Aug 01 Javascript
用js编写留言板
Mar 17 Javascript
Vue 监听元素前后变化值实例
Jul 29 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
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
php算法实例分享
2015/07/14 PHP
PHP格式化MYSQL返回float类型的方法
2016/03/30 PHP
Javascript之文件操作
2007/03/07 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
AngularJS入门教程(一):静态模板
2014/12/06 Javascript
浅析Ajax语法
2016/12/05 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
简单了解vue中的v-if和v-show的区别
2019/10/08 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
git进行版本控制心得详谈
2017/12/10 Python
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
用 Python 制作地球仪的方法
2020/04/24 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
Sephora丝芙兰印尼官方网站:购买化妆品和护肤品
2018/07/02 全球购物
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
档案接收函范文
2014/01/10 职场文书
校园十大歌手策划书
2014/02/01 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书
python_tkinter弹出对话框创建
2022/03/20 Python