JQuery.validate.js Use Demo__js

1. Introduction of JQuery.validate.js

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

2, Form form

<form id= "Registeruserform" > <span class= "asterisk" >*</span> member name: <input type= "text" id= "UserId" Name= "UserId" class= "Wid2"/> <span class= "asterisk" >*</span> Password: <input type= "Password" Password ' name= ' password ' class= ' wid2 ' onpaste= ' return false ' oncontextmenu= ' return false ' oncopy= ' return False "oncut= return false"/> <span class= "asterisk" >*</span> Confirm password: <input type= "password ' id= ' password2 ' name= ' password2 ' class= ' wid2 ' onpaste= ' return false ' oncontextmenu= ' return false ' oncopy= ' Return false ' oncut= ' return false '/> <span class= "asterisk" >*</span> Company name: <input type= " Text "id=" CompanyName "name=" CompanyName "class=" Wid2 "/>" <span class= "asterisk" >*</sp An> Mobile phone Number: <input type= "text" id= "mobile" name= "mobile" class= "Wid2"/> <a "id=" register "class=" BTN btn6 Round "> <span class=" inNER "> Registration </span></a> </form> 

3. New Verification method

        Verify the phone number format jQuery.validator.addMethod ("Checkusermobile", function (value) {var _len = $ ("#mobile"). Val (). Leng
 		Th
		 if (_len!=) {return false;
	 return true;
	}); /* User Famous School Inspection * * * 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;
	}); /* User Famous School Inspection * * * JQuery.validator.addMethod ("Checkuserisfristga", function (value) {if ($ ("#userId"). Val (). IndexOf ("_") ==0
		) {return false;
	return true;
	}); /* User Famous School Inspection * * * 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;
	}); /* Enterprise Name Check/jQuery.validator.addMethod ("Checkcompany", function (value) {var rgexp = new RegExp ("[' ~!@%#$^&* () =|{}" ':; ', \\[\\]<>/?\\.;:%......+￥ () "" "" ". ，、。
		]");
		if (Value.match (rgexp)) {return false;
	return true; });

4, for the form registration Validate method

$ ("#registerUserForm"). Validate ({rules: {userId: {required:true, checkuser:true, che
						Ckuserisnumber:true, Checkuserfrist:true, Checkuserisfristga:true, Minlength:5, Maxlength:15, Remote: {type: "post", url: ".. /.. /register/checkuserisexist ", datatype:" JSON ", data: {userid:function () {R
									Eturn $ ("#userID"). Val ();
								}}}, password: {required:true, Minlength:6, maxlength:16 }, Password2: {required:true, Minlength:6, Maxlength:16, Equalto: "#passw
									Ord "}, 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, Checkusermo Bile:true, Remote: {type: "post", url: ".. /..  /register/checkaccountbyphone ", datatype:" JSON ", data: {mobile:function ()
											{return $ ("#mobile"). Val (); }}}, messages: {userId: {required: "  <span class = ' Yz-icon ' > username cannot be empty </span> ', Checkuserisnumber: "  <span class= ' Yz-icon ' > username cannot be all numbers &LT;/SP An> ", Checkuserfrist:"   <span class= ' Yz-icon ' > first must be the letter </span> ", CHECKUSERISFRISTGA : "  <span class= ' Yz-icon ' > first must be the letter </span>", minlength: "  <span class= ' Yz-icon ' > username is at least 5 characters long </Span> ", maxlength:"   <span class= ' Yz-icon ' > Username length maximum is 15 characters </span> ", Checku Ser: "  <span class= ' Yz-icon ' > Username format is incorrect </span>"}, Password: {required: "& Nbsp; <span class= ' Yz-icon ' > password cannot be null </span> ", minlength:"   <span class= ' Yz-icon ' >
							Minimum password length of 6 characters </span> ", MaxLength:"   <span class= ' Yz-icon ' > Password length is up to 16 characters </span> " }, Password2: {required: "  <span class= ' yz-icon ' > Confirm password cannot be null </span>", Minlen Gth: "  <span class= ' Yz-icon ' > password is at least 6 characters long </span>", maxlength: "  <span class= ' Yz-icon ' > Password maximum length of 16 characters </span> ", Equalto:"   <span class= ' yz-icon ' > Confirm password and password inconsistent </span&gt
								; "}, CompanyName: {required:"   <span class= ' Yz-icon ' > company name cannot be null </span> ", MaxLength: "&nbsp <span class= ' Yz-icon ' > company name maximum length of 60 characters </span> ", Checkcompanyisnumber:"   <span clas s= ' Yz-icon ' > company name can not be all digital </span>, Checkcompany: "  <span class= ' Yz-icon ' > Company name format is not correct </span
								> "}, Mobile: {required:"   <span class= ' Yz-icon ' > Mobile phone number can not be empty </span> ", Number: "  <span class= ' Yz-icon ' > Mobile number can only be digital </span>", Checkusermobile: "  < Span class= ' Yz-icon ' > Mobile number incorrectly formatted </span> '}}}

5, using Validate method to check whether the validation through

$ ("#registerUserForm"). Valid ()  //return TRUE or False

Hint Style:

. 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;
}