密码强度评分,根据得分显示密码强度。
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插件一般也是按这个思路写的。
大家可以按这个思路去扩展,不过只要实用越简单越好
代码如下
<script type="text/javascript">
//首先要加载jquery库文件,因为这里只是给大家演示,所以我就不加载了。
//下面为jquery代码
$(function(){
$("#name").blur(function(){//用户名文本框失去焦点触发验证事件
if(!$(this).val || !$(this).val.match(/([w]){2,15}$/))//只处验证不能为空并且只能为英文或者数字或者下划线组成的2-15个字符
{
$("#nameTip").html("用户名不能为空且只能为英文或者数字");
}
else
{
$("#nameTip").html("输入正确");
}
});
$("#pas1").blur(function(){//用户名文本框失去焦点触发验证事件
if(!$(this).val || !$(this).val.match(/([w]){2,15}$/))//只处验证和上面一样
{
$("#pas1").html("密码不能为空且只能为英文或者数字");
}
else
{
$("#pas1").html("输入正确");
}
});
$("#pas2").blur(function(){//用户名文本框失去焦点触发验证事件
if(!$(this).val || $(this).val() != $("#pas1").val() )//只处验证和上面一样
{
$("#pas2").html("密码为空或者和上面的密码不致");
}
else
{
$("#pas2").html("输入正确");
}
});
})
</script>
<form action="#">
用户名:<input type="text" id="name" /><span id="nameTip"></span>
密码:<input type="password" id="pas1" /><span id="pas1Tip"></span>
确认密码:<input type="password" id="pas2" /><span id="pas2Tip"></span>
<input type="submit" value="提交" />
</form>
- <%@ 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>
- $(function(){
- var validator = $("#myform").validate({
- debug: true, //调试模式取消submit的默认提交功能
- errorClass: "haha",//默认为错误的样式类为:error
- focusInvalid: false,
- onkeyup: false,
- submitHandler: function(form){ //表单提交句柄,为一回调函数,带一个参数:form
- alert("提交表单");
- //form.submit(); 提交表单
- },
- rules: { //定义验证规则,其中属性名为表单的name属性
- username: {
- required: true,
- minlength: 2,
- remote: "uservalid.jsp" //传说当中的ajax验证
- },
- firstpwd: {
- required: true,
- //minlength: 6
- rangelength: [6,8]
- },
- secondpwd: {
- required: true,
- equalTo: "#password"
- },
- sex: {
- required: true
- },
- age: {
- required: true,
- range: [0,120]
- },
- email: {
- required: true,
- email: true
- },
- purl: {
- required: true,
- url: true
- },
- afile: {
- required: true,
- accept: "xls,doc,rar,zip"
- }
- },
- messages: { //自定义验证消息
- username: {
- required: "用户名是必需的!",
- minlength: $.format("用户名至少要{0}个字符!"),
- remote: $.format("{0}已经被占用")
- },
- firstpwd: {
- required: "密码是必需的!",
- rangelength: $.format("密码要在{0}-{1}个字符之间!")
- },
- secondpwd: {
- required: "密码验证是必需的!",
- equalTo: "密码验证需要与密码一致"
- },
- sex: {
- required: "性别是必需的"
- },
- age: {
- required: "年龄是必需的",
- range: "年龄必须介于{0}-{1}之间"
- },
- email: {
- required: "邮箱是必需的!",
- email: "请输入正确的邮箱地址(例如 myemail@163.com)"
- },
- purl: {
- required: "个人主页是必需的",
- url: "请输入正确的url格式,如 http://www.domainname.com"
- },
- afile: {
- required: "附件是必需的!",
- accept: "只接收xls,doc,rar,zip文件"
- }
- },
- errorPlacement: function(error, element) { //验证消息放置的地方
- error.appendTo( element.parent("td").next("td") );
- },
- highlight: function(element, errorClass) { //针对验证的表单设置高亮
- $(element).addClass(errorClass);
- },
- success: function(label) {
- label.addClass("valid").text("Ok!")
- }
- /*,
- errorContainer: "#error_con", //验证消息集中放置的容器
- errorLabelContainer: "#error_con ul", //存放消息无序列表的容器
- wrapper: "li", //将验证消息用无序列表包围
- validClass: "valid", //通过验证的样式类
- errorElement: "em", //验证标签的名称,默认为:label
- success: "valid" //验证通过的样式类
- */
- });
- $("button").click(function(){
- validator.resetForm();
- });
- //alert($("#password").rules()["required"]);
- //validator.showErrors({"username": "用户名是必需的"});
- /*$("button").click(function () {
- var str = "Hello {0}, this is {1}";
- alert("'" + str + "'");
- str = $.validator.format(str, ["koala","oo"]);
- alert("'" + str + "'");
- });*/
- });
- <%@ page language="java" import="java.io.PrintWriter" pageEncoding="gb2312"%><%
- String username = request.getParameter("username");
- PrintWriter pw = response.getWriter();
- try{
- if(username.toLowerCase().equals("admin")){
- pw.println("true");
- }else{
- pw.println("false");
- }
- }catch(Exception ex){
- ex.getStackTrace();
- }finally{
- pw.flush();
- pw.close();
- }
- %>