<html>
<head>
<title>TestM</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
$(function(){
$("#testFormLogin").validate({
rules : {
loginName: {
required: true,
minlength: 5
},
password :{
required : true,
}
},
messages:{
loginName : {
required : "login name filed is required",
minlength : "min length is 5 charactor "
},
password :{
required:"password filed is required"
}
}
});
$("#testFormLogin").submit(function() {
var isValidate = 1;
$("#testFormLogin").find("input").each(function(){
isValidate = isValidate & $(this).valid();
})
if(isValidate){
var url = "testLoginForm.do";
$.ajax({
url : url,
dateType: "json",
type:"post",
data : $('#testFormLogin').serialize(),
success:function(data){
if(data.status == "success"){
window.location.href = "home.do";
}else{
window.location.href = "login.do";
}
}
})
}
return false;
});
})
</script>
</head>
<body>
<form id="testFormLogin" method="post">
<div align="center">
<table>
<tr>
<td align="left">UserName:</td>
<td align="left"><input type="text" id="username" name="loginName"/></td>
</tr>
<tr>
<td align="left">PassWord:</td>
<td align="left"><input type="password" id="password" name="password"/></td>
</tr>
</table>
<input type="submit" id="login" value="Login" />
</div>
</form>
</body>
</html>
//------- Gorgeous dividing line-------------------------------------- ----------------------------------------
//----------Describe some properties----------------------------------- -------------------------------------------------- ------
$("#articleInfoForm").validate({
onfocusin: function(element) { $(element).valid(); },
onfocusout: function(element) { $(element).valid(); },
//Adding onfocusout onfocusin will trigger when the focus is lost
errorElement:"errorMsg",
errorClass: "errorMsg",
// errorElement errorClass This is the element and the class name of the element when the custom validation fails
rules : {
name: {
required: true,
rangelength: [0,50],
},
},
messages:{
name : {
required : "The title of the article is required",
rangelength: "The length of the article title ranges from [0-50]",
},
}
});