使用JS验证密码的强度 jQuery验证框架

最新推荐文章于 2018-07-29 16:53:03 发布

拎干的毛巾

最新推荐文章于 2018-07-29 16:53:03 发布

阅读量1.3k

点赞数 2

分类专栏： js 文章标签： js验证

本文链接：https://blog.csdn.net/henry_yqh/article/details/8227677

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

密码强度评分，根据得分显示密码强度。
function testpass(password,username){
   var score = 0;
   if (password.length < 4 ) { return -4; }
   if (typeof(username) != 'undefined' && password.toLowerCase() == username.toLowerCase()){return -2}
   score += password.length * 4;
   score += ( repeat(1,password).length - password.length ) * 1;
   score += ( repeat(2,password).length - password.length ) * 1;
   score += ( repeat(3,password).length - password.length ) * 1;
   score += ( repeat(4,password).length - password.length ) * 1;
   if (password.match(/(.*[0-9].*[0-9].*[0-9])/)){ score += 5;}
   if (password.match(/(.*[!,@,#,$,%,^,&,*,?,_,~].*[!,@,#,$,%,^,&,*,?,_,~])/)){ score += 5 ;}
   if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)){ score += 10;}
   if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)){ score += 15;}
   if (password.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && password.match(/([0-9])/)){ score += 15;}
   if (password.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && password.match(/([a-zA-Z])/)){score += 15;}
   if (password.match(/^\w+$/) || password.match(/^\d+$/) ){ score -= 10;}
   if ( score < 0 ){score = 0;}
   if ( score > 100 ){ score = 100;}
   return score;

   function repeat(len,str){
   var res = "";
   for (var i = 0; i < str.length; i++ ){
       var repeated = true;
       for (var j = 0, max = str.length - i - len; j < len && j < max; j++){
           repeated = repeated && (str.charAt(j + i) == str.charAt(j + i + len));
       }
       if (j < len) repeated = false;
       if (repeated) {
           i += len - 1;
           repeated = false;
       }else{
           res += str.charAt(i);
       }
   }
   return res;
   }
}

通过上述函数可对密码进行评分验证。
举例：
function checkpass(pass){
    var username = document.getElementById('username').value;
    var score = testpass(pass.value,username);
    var password_label = document.getElementById('password_label');
    if(score == -4)    {
        password_label.innerHTML = '太短';
    }else if(score == -2){
        password_label.innerHTML = '与用户名相同';
    }else{
        var color = score < 34 ? '#edabab' : (score < 68 ? '#ede3ab' : '#d3edab');
        var text = score < 34 ? '弱' : (score < 68 ? '一般' : '很好');
        var width = score + '%';
        password_label.innerHTML = "<span style='width:"+width+";display:block;overflow:hidden;height:20px;line-height:20px;background:"+color+";'>"+text+"</span>";
    }
}
</script>
请输入用户名：<br>
<input type="text" class="inpt" name="username" style="width:160px" id="username" /><br>
请输入密码：<br>
<input type="password" class="inpt" style="width:160px" οnkeyup="javascript:checkpass(this)" name="pass" id="pass" /><br>
<span id="password_label" style="width:160px;border:1px solid #F0F0F0"></span>

jquery验证表单很简单的方法
现在网上有很多jquery验证表单的插件，但都写的比较复杂。一般都有两三个文件。
我今天写一个最简单但是很实用的验证登录表单的方法。
我基本上只是给大家提供一种思路。jquery插件一般也是按这个思路写的。
大家可以按这个思路去扩展，不过只要实用越简单越好

代码如下

[1] 验证页面

Html代码

<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<html>
<head>
<title>jquery验证框架</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src=js/jquery-1.3.2.min.js></script>
<script type="text/javascript" src=js/jquery.validate.pack.js></script>
<script type="text/javascript" src=js/jquery.form.js></script>
<script type="text/javascript" src=js/valid.js></script>
<style type="text/css">
label { width: 10em; float: left; }
label.haha {color: red; padding-left: 18px; vertical-align: top;width: 196px; background: url("images/unchecked.gif") no-repeat;}
input.haha { border: 1px solid red; }
label.valid {background: url("images/checked.gif") no-repeat; color: #065FB9;}
input.focus { border: 2px solid green; }
ul li{ display: block;}
</style>
</head>
<body>
<div id="form_con">
<form class="cmxform" id="myform" method="post" action="">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>用户名</td>
<td><input type="text" name="username" class="required" /></td>
<td></td>
</tr>
<tr>
<td>密码</td>
<td><input id="password" type="password" name="firstpwd" /></td>
<td></td>
</tr>
<tr>
<td>验证密码</td>
<td><input type="password" name="secondpwd" /></td>
<td></td>
</tr>
<tr>
<td>性别</td>
<td><input id="sex" type="radio" name="sex" />男<input type="radio" name="sex" />女</td>
<td></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" name="age" /></td>
<td></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" name="email" /></td>
<td></td>
</tr>
<tr>
<td>个人网页</td>
<td><input type="text" name="purl" /></td>
<td></td>
</tr>
<tr>
<td>电话</td>
<td><input type="text" name="telephone" /></td>
<td></td>
</tr>
<tr>
<td>附件</td>
<td><input type="file" name="afile"/></td>
<td></td>
</tr>
<tr><td colspan="3" ><input type="submit" name="submit" value="提交" /><button>重置</button></td></tr>
</tbody>
</table>
</form>
</div>
</body>
</html>