标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../Common/css/user_login_register.css" />
<script src="../Common/js/jquery-validation/lib/jquery.js"></script>
<script src="../Common/js/jquery-validation/dist/jquery.validate.js"></script>
<script src="../Common/js/form_check.js"></script>
/*首先解释一下这里，第一个的css是当前的样式，里面最主要的是有个错误信息的样式的设置.error{}*/
register.css
label.error{
color:red;
background-color:yellow;
}
//接着两个是必须添加的，jquery.validate.js依据jquery.js实现
//最后一个是js文件。里面可以自定义验证规整和验证方法.
</head>
<body>
<div class="dbody">
<div class="content register">
<form action="gamehost.html" method="post" id="register">//这里的表单验证id,
<fieldset class="filed_register">
<legend>User Login</legend>
<ul>
<li>
<label>账号:</label><input type="text" name="user" id="user" maxlength="15"/>//这里的user id
</li>
<li>
<label>密码:</label><input type="password" name="password" id="password" maxlength="15" />//这里password id
</li>
<li>
<label>确认密码:</label><input type="password" name="topassword" id="topassword" maxlength="15" />//这里的topassword id对应着自定义的一种验证规则,
</li>
<li>
<label>邮箱:</label><input type="email" name="user_email" id="user_email" maxlength="15" />
</li>
</ul>
</fieldset>
<div class="botdiv">
<input type="submit" name="register" id="reigster" value="注册" />
</div>
</form>
</div>
</div>
</body>
</html>
//这里是js文件的内容
$(function(){
//1.通过validate对表单进行验证
var $form_result = $("#register").validate({
rules:{//2.自定义验证规则
user:{//这里是对应的id，对应一种验证规则
required:true,
rangelength:[6,15],
user_consist:true,
},
password:{
required:true,
rangelength:[6,15],
password_consist:true,//这个是自定义的验证方法，方法名也是自定义的。
},
topassword:{
required:true,
rangelength:[6,20],
equalTo:"#password",//这里的验证是否相同的要写好。
password_consist:true,
},
user_email:{
required:true,
email:true,
}
//邮箱不用自定义验证
},
messages:{
user:{//跟上面的对应，这个是自定义错误信息
required:"请输入用户名",
rangelength:"请输入6-15个字符,用户名右数字或字母组成，且首字符为英文",
user_consist:"请输入6-15个字符，用户名由数字或字母组成，且首字符为英文",
},
password:{
required:"请输入密码",
rangelength:"请输入6-20个字符，密码由数字或字母组成",
user_consist:"请输入6-20个字符，密码由数字或字母组成",
},
topassword:{
required:"请输入密码",
rangelength:"请输入6-20个字符，密码由数字或字母组成",
user_consist:"请输入6-20个字符，密码由数字或字母组成",
equalTo:"两次密码不一致，请重新输入",
},
user_email:{
required:"用户邮箱不为空",
email:"email格式不正确",
}
}
})
});
//这个是自定义验证方法。
jQuery.validator.addMethod("user_consist", function(value, element) {
var reg =/^[a-zA-Z][a-zA-Z0-9]{5,14}$/;//有字母数字组成，并且首字符为字母,长度为6-15位
return value.match(reg)==null?false:true;
}, "这是用户名组成consiste默认的提示错误信息");
jQuery.validator.addMethod("password_consist", function(value, element) {
var reg =/^[a-zA-Z0-9]{6,20}$/;//有字母数字组成，并且首字符为字母，长度为6-20
return value.match(reg)==null?false:true;
}, "这是密码组成consiste默认的提示错误信息");
jQuery.validator.addMethod("password_consist", function(value, element) {
var reg =/^[a-zA-Z0-9_]{6,15}$/;
return value.match(reg)==null?false:true;
}, "这是密码组成consiste默认的提示错误信息");
//下面的自定义的错误信息提示会覆盖上面的错误信息提示，在接着覆盖父类中的默认英文错误信息提示
//自定义的验证规则，和验证方法，在程序运行的时候会自动验证。通过规定的验证规则rules去查找对应的验证方法method，然后在会自动生成一个label错误提示在其后面，可参考模板，
在使用的时候可能会遇到一些小问题，大家仔细钻研，如果有人发同类文章更加详细的，可给我连接，我也去足额西
标签：
原文地址：http://www.cnblogs.com/php-log/p/4845247.html
