<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>
//-------- 华丽的分割线----------------------------------------------------------------------------
//----------说明一些属性-------------------------------------------------------------------------------------------
$("#articleInfoForm").validate({ onfocusin: function(element) { $(element).valid(); }, onfocusout: function(element) { $(element).valid(); }, //加入onfocusout onfocusin 会在失去焦点是触发 errorElement:"errorMsg", errorClass: "errorMsg", // errorElement errorClass 这是自定义验证不通过时的元素和 元素的class名 rules : { name: { required: true, rangelength: [0,50], }, }, messages:{ name : { required : "文章标题必填", rangelength:"文章标题长度范围在[0-50]之间", }, } });