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 相关文章推荐
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
Nov 24 Javascript
JavaScript中的包装对象介绍
Jan 27 Javascript
JavaScript随机生成颜色的方法
Oct 15 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
JS使用正则表达式提交页面验证的代码
Oct 16 Javascript
vuex的使用步骤
Jan 06 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
基于php伪静态的实现详细介绍
2013/04/28 PHP
PHP mail()函数使用及配置方法
2014/01/14 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
php命令行写shell实例详解
2018/07/19 PHP
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
iview实现select tree树形下拉框的示例代码
2018/12/21 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
wxPython窗口中文乱码解决方法
2014/10/11 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
用python写个自动SSH登录远程服务器的小工具(实例)
2017/06/17 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
华三通信H3C面试题
2015/05/15 面试题
优秀团队获奖感言
2014/02/19 职场文书
合作协议书范文
2014/08/20 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
2014年检察院个人工作总结
2014/12/09 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书
2016入党心得体会范文
2016/01/06 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang