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 相关文章推荐
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
Node.js学习入门
Jan 03 Javascript
在js中做数字字符串补0(js补零)
Mar 25 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
微信小程序的tab选项卡的实现效果
May 15 Javascript
移动端吸顶fixbar的解决方案详解
Jul 17 Javascript
springboot+vue实现文件上传下载
Nov 17 Vue.js
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
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
php数据库备份还原类分享
2014/03/20 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
PHP中PCRE正则解析代码详解
2019/04/26 PHP
alert和confirm功能介绍
2014/05/21 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
python实现清屏的方法
2015/04/30 Python
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
秋季运动会表扬稿
2014/01/16 职场文书
社会学专业求职信
2014/02/24 职场文书
精彩的广告词
2014/03/19 职场文书
请假条格式范文
2014/04/10 职场文书
绿色小区申报材料
2014/08/22 职场文书
死亡赔偿协议书
2015/01/28 职场文书
公积金接收函格式
2015/01/30 职场文书
中小企业员工手册范本
2015/05/14 职场文书