脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js密码强度

javascript密码强度校验代码（两种方法）

 更新时间：2015年08月10日 11:54:51   作者：xiaomou2014  
为了保证网站个人信息的安全，很多网站在注册页面都设置密码强度这项，用javascript如何实现密码强度校验代码呢？下面小编给大家整理了两种方法使用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('&nbsp;');
 $('#middle').html('&nbsp;');
 $('#strength').html('&nbsp;');
 $('#weak').css({backgroundColor:''});
 $('#middle').css({backgroundColor:''});
 $('#strength').css({backgroundColor:''});
 }
}
</script>

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

您可能感兴趣的文章:

相关文章

  • JavaScrip调试技巧之断点调试

    JavaScrip调试技巧之断点调试

    本篇文章给大家介绍javascript调试技巧之断点调试，主要介绍使用Firebug、debugger、debugger在程序中加入断点调试等，但是这些调试技巧都不借助于浏览器之外的工具，其他浏览器主要是opera、safari、chrome和ie8，感兴趣的小伙伴一起看看吧
    2015-10-10
  • 基于javascript html5实现多文件上传

    基于javascript html5实现多文件上传

    这篇文章主要为大家详细介绍了基于javascript html5实现多文件上传的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-03-03
  • webpack打包中path.resolve(__dirname, 'dist')的含义解析

    webpack打包中path.resolve(__dirname, 'dist')的含义解

    这篇文章主要介绍了webpack打包中path.resolve(__dirname, 'dist')的含义解析,path:path.resolve(__dirname, 'dist')就是在打包之后的文件夹上拼接了一个文件夹，在打包时，直接生成，本文给大家讲解的非常详细，需要的朋友可以参考下
    2023-05-05
  • 详解JS构造函数中this和return

    详解JS构造函数中this和return

    本文通过实例代码给大家介绍了JS构造函数中this和return，需要的朋友参考下吧
    2017-09-09
  • javascript移动开发中touch触摸事件详解

    javascript移动开发中touch触摸事件详解

    这篇文章主要为大家详细介绍了javascript移动开发中touch触摸事件，感兴趣的小伙伴们可以参考一下
    2016-03-03
  • 一文彻底理解JavaScript原型与原型链

    一文彻底理解JavaScript原型与原型链

    这篇文章主要介绍了一文彻底理解JavaScript原型与原型链，JavaScript中有许多内置对象，如:Object, Math, Date等，文章围绕主题展开主题详情，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-08-08
  • next.js之getStaticProps getStaticPaths使用技巧解析

    next.js之getStaticProps getStaticPaths使用技巧解析

    这篇文章主要为大家介绍了next.js之getStaticProps getStaticPaths使用技巧解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06
  • JS文本框默认值处理详解

    JS文本框默认值处理详解

    以下代码是对JS文本框的默认值处理进行了介绍，需要的朋友可以参考下
    2013-07-07
  • form.submit()不能提交表单的错误原因及解决方法

    form.submit()不能提交表单的错误原因及解决方法

    button的id不要设置为submit,否则可能会引起混淆，导致表单的submit()方法不能提交表单
    2014-10-10
  • JS实现随页面滚动显示/隐藏窗口固定位置元素

    JS实现随页面滚动显示/隐藏窗口固定位置元素

    窗口固定位置显示元素，当页面高度大于某高度，并且页面向下滚动时，显示该元素；当页面位置小于某高度，或者页面向上滚动时，隐藏该元素，下面通过本文给大家介绍JS实现随页面滚动显示/隐藏窗口固定位置元素，需要的朋友参考下吧
    2016-02-02

最新评论