index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.9.0.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript">
// add the customized method
$.validator.addMethod("test",function(value,element,params){
var flag = false;
if(typeof(value)!=null&&parseInt(value)>10){
flag = true;
}
return this.optional(element) || flag;
},"the input value must be larger that 10");
$(function(){
$("#form").validate({
submitHandler: function(form) {
alert("pass ... ");
},
rules: {
username: {
required:true
},
password:{
required:true,
minlength:6
},
email:{
required:true,
email:true
},
testField:{
required:true,
test:true
}
},
messages: {
username: {
required:"please input the username"
},
password:{
required:"please input the password",
minlength:"the password must be six characters at least"
},
email:{
required:"please input the email",
email:"the email format is wrong!"
},
testField:{
required:"please input the testField",
}
}//end messages
});
});
</script>
</head>
<body>
<form id="form">
<div>
<label>username</label>
<input name="username" type="text" />
</div>
<div>
<label>password</label>
<input name="password" type="text" />
</div>
<div>
<label>email</label>
<input name="email" type="text" />
</div>
<div>
<label>test field</label>
<input name="testField" type="text" />
</div>
<div>
<input type="submit" value="submit" />
</div>
</form>
</body>
</html>
