JQuery.validate.js使用demo

1、引入JQuery.validate.js

<script src="../../javascript/jquery.validate.js" type="text/javascript"></script>

2、form表单

<form id="registerUserForm">
		<span class="asterisk">*</span>会员名：<input type="text" id="userId" name="userId" class="wid2" />
		<span class="asterisk">*</span>密码：<input type="password" id="password" name="password" class="wid2"
								οnpaste="return false" οncοntextmenu="return false"
								οncοpy="return false" oncut="return false" /> 
               <span class="asterisk">*</span>确认密码：<input type="password" id="password2" name="password2"
								class="wid2" οnpaste="return false" οncοntextmenu="return false"
								οncοpy="return false" oncut="return false" /> 
               <span class="asterisk">*</span>公司名称：<input type="text" id="companyName" name="companyName"
								class="wid2" /> 
               <span class="asterisk">*</span>手机号码：<input type="text" id="mobile" name="mobile" class="wid2" /> 
							
	       <a id="register" class="btn btn6 round" > <span class="inner">注册</span></a>
</form>

3、新增验证方法

        // 验证手机号码格式
 	jQuery.validator.addMethod("checkusermobile", function(value) {
		var _len = $("#mobile").val().length;
 		if(_len != 11){
			return false;
		 }
		return true;
	 });
	/* 用户名校验 */
 	jQuery.validator.addMethod("checkuser", function(value) {
 		var rgExp =/^[0-9A-Za-z_]*$/
		if (!($("#userId").val().match(rgExp))) {
 			return false;
		}
 		return true;
	});
	/* 公司名校验 */
 	jQuery.validator.addMethod("checkcompanyisnumber", function(value) {
		 var rgExp =/^[0-9]{0,}$/; // --/^[a-zA-Z].*[0-9]|[0-9].*[A-Za-z]/;	
		if(rgExp.test($("#companyName").val())){
			return false;
		}
		return true;
	});
	/* 用户名校验 */
	jQuery.validator.addMethod("checkuserisfristga", function(value) {	
		if($("#userId").val().indexOf("_")==0){
			return false;
		}
		return true;
	});
	/* 用户名校验 */
	jQuery.validator.addMethod("checkuserfrist", function(value) {
		var rgExp =/^[0-9]{0,}$/; // --/^[a-zA-Z].*[0-9]|[0-9].*[A-Za-z]/;	
		if(rgExp.test($("#userId").val().substring(0,1))){
			return false;
		}
		return true;
	});
	/* 企业名称校验 */
	jQuery.validator.addMethod("checkcompany",function(value) {
		var rgExp = new RegExp("[`~!@%#$^&*()=|{}':;',\\[\\]<>/?\\.；：%……+￥（）【】‘”“'。，、？]");
		if (value.match(rgExp)) {
			return false;
		}
		return true;
	});

4、为表单注册validate方法

$("#registerUserForm").validate(
		{
			rules : {
					userId : {
						required : true,
						checkuser : true,
						checkuserisnumber:true,
						checkuserfrist:true,
						checkuserisfristga:true,
						minlength : 5,
						maxlength : 15,
						remote : {
							type : "post",
							url : "../../register/checkUserIsExist",
							datatype : "json",
							data : 
								{
									userID : function() {
										return $("#userID").val();
									}
								}
						}
					},
					password : {
								required : true,
								minlength : 6,
								maxlength : 16
								},
					password2 : {
								required : true,
								minlength : 6,
								maxlength : 16,
								equalTo : "#password"
								},
					companyName : {
									required : true,
									maxlength : 60,
									checkcompany : true,
									checkcompanyisnumber:true,
									remote : {
										type : "post",
										url : "../../register/checkAccountByCompanyName",
										datatype : "json",
										data : 
											{
											companyName : function() {
													return $("#companyName").val();
												}
											}
									}
								  },
					mobile : {
								required : true,
								number : true,
								checkusermobile : true,
								remote : {
									type : "post",
									url : "../../register/checkAccountByPhone",
									datatype : "json",
									data : 
										{
										    mobile : function() {
												return $("#mobile").val();
											}
										}
								}
							 }
				},
				messages : {
							userId : {
								required : "  <span class='yz-icon'>用户名不能为空</span>",
								checkuserisnumber : "  <span class='yz-icon'>用户名不能全是数字</span>",
								checkuserfrist:"  <span class='yz-icon'>首位必须是字母</span>",
								checkuserisfristga:"  <span class='yz-icon'>首位必须是字母</span>",
								minlength : "  <span class='yz-icon'>用户名长度最少为5个字符</span>",
								maxlength : "  <span class='yz-icon'>用户名长度最大为15个字符</span>",
							        checkuser : "  <span class='yz-icon'>用户名格式不正确</span>"	
							},
							password : {
								required : "  <span class='yz-icon'>密码不能为空</span>",
								minlength : "  <span class='yz-icon'>密码长度最少为6个字符</span>",
								maxlength : "  <span class='yz-icon'>密码长度最多为16个字符</span>"
							},
							password2 : {
								required : "  <span class='yz-icon'>确认密码不能为空</span>",
								minlength : "  <span class='yz-icon'>密码长度最少为6个字符</span>",
								maxlength : "  <span class='yz-icon'>密码长度最大为16个字符</span>",
								equalTo : "  <span class='yz-icon'>确认密码与密码不一致</span>"
							},
							companyName : {
								required : "  <span class='yz-icon'>公司名称不能为空</span>",
								maxlength : "  <span class='yz-icon'>公司名称长度最大为60个字符</span>",
								checkcompanyisnumber : "  <span class='yz-icon'>公司名不能全是数字</span>",
								checkcompany : "  <span class='yz-icon'>公司名称格式不正确</span>"
							},
							mobile : {
								required : "  <span class='yz-icon'>手机号码不能为空</span>",
								number : "  <span class='yz-icon'>手机号码只能为数字</span>",
								checkusermobile : "  <span class='yz-icon'>手机号码格式不正确</span>"
							}
			}
});

5、使用validate的方法 检查是否验证通过

$("#registerUserForm").valid()  //返回true或false

提示样式：

.yz-icon {
    background: url("../images/msg_bg.gif") no-repeat scroll 3px -46px #fff2f2;
    border: 1px solid #ff8080;
    display: inline-block;
    padding: 0 10px 0 25px;
}