一、jQuery.validate簡介
jQuery.validate.js插件用於對表單輸入進行驗證，其使用配置非常簡單。支持多事件觸發，自帶多種驗證規則，還支持自定義驗證規則。
1、配置方法
先導入jQuery庫，然后導入Validate插件，如果是中文提示還需要導入messages_zh.js。
注意Validate的導入要在jQuery庫之后。代碼如下：
<script src="jQuery.1.8.3.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="messages_zh.js" type="text/javascript"></script>
然后只要定義驗證規則和指定錯誤提示位置就可以了。
在$(document).ready()里加入驗證規則與錯誤提示位置，代碼如下：
JS代碼：
<script type="text/javascript">
$(function () {
$("#form1").validate({
/*自定義驗證規則*/
rules:{
username:{ required:true,minlength:6 },
userpass:{ required:true,minlength:10 }
},
/*錯誤提示位置*/
errorPlacement:function(error,element){
error.appendTo(element.siblings("span"));
}
});
})
</script>
HTML代碼：
<form id="form1" action="#" method="post">
<p>用戶登錄</p>
<p>名稱:<input id="txtName" name="username" type="text" class="txt" /><span style="color:Red;font-size:10px;"></span></p>
<p>密碼:<input id="txtPass" name="userpass" type="password" class="txt" /><span style="color:Red;font-size:10px;"></span></p>
<div>
<input id="btnLogin" type="button" value="登錄" class="btn" />
<input id="btnReset" type="button" value="取消" class="btn" />
</div>
</form>
這樣就完成了非常簡單的表單驗證功能，當表單填寫不正確時Validate在<input>的兄弟<span>元素里顯示錯誤提示。
2、name屬性
說明：jQuery.validate.js插件與<input>的關聯使用的是表單的name屬性。只有存在name屬性的<input>才能驗證！
二、自定義錯誤提示位置
當我們想設置錯誤提示的顯示位置怎么設置呢？
答案就是在errorPlacement參數里，你可以按照自己的需要自定義書寫，用的是jQuery
/*錯誤提示位置*/ errorPlacement:function(error,element){ //第一個參數是錯誤的提示文字，第二個參數是當前輸入框 error.appendTo(element.siblings("span")); //用的是jQuery，這里設置的是，錯誤提示文本顯示在當前文本框的兄弟span中 }
三、自定義錯誤提示信息
例如當我們有多個require:true選項，我想根據不同的選項設置不同的提示怎么辦呢？
答案就是在messages參數里。用層層嵌套的方式設置自己需要的提示信息。如果某個字段沒有message信息，這時才調用默認的提示信息。
messages: { UserName: { required: "請輸入用戶名！" //注意，同樣是必填項，但是優先顯示在messages里的提示信息 }, Email:{ required:"請輸入郵箱地址!" //不會統一輸出 必填字段 了哦 } }
實際上，jQuery.Validate默認的錯誤提示是生成一個class=error的label，所以，如果想設置樣式，最簡單的方法就是針對這個label設置就OK了，當然默認的label是可以手動更改的。
四、ajax異步驗證
只需要用到remote即可，注意后台返回的JSON只能夠是true或false。
以下給出一個綜合示例，前台HTML代碼
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>表單驗證插件</title> <script src="/Scripts/jquery-1.7.1.js" type="text/javascript"></script> <script src="/Scripts/messages_zh.js" type="text/javascript"></script> <script src="/Scripts/validates.js" type="text/javascript"></script> <script src="/Scripts/jquery.validate.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#form1").validate({ rules: { UserName: { required: true, minlength: 3, maxlength: 18, remote: "/Home/CheckUserName" }, Email: { required: true,email:true }, UserPassword: { required: true ,minlength: 6 }, Mobile: { required: true, number:true }, IdCard: { required: true,isIdCardNo: true }, Age: { required: true ,number:true,min:1,max:100 } }, messages:{ UserName: { required: "請輸入用戶名！", minlength: "用戶名長度最少需要3位！", maxlength: "用戶名長度最大不能超過18位！", remote: "此用戶名已存在！" }, Email: { required: "請填寫郵箱", email: "請輸入正確的郵箱格式" }, UserPassword: { required: "請填寫你的密碼!", minlength: "密碼長度不能小於6位" }, Mobile: { required: "請填寫你的手機號碼", number:"手機號碼只能為數字" }, IdCard: { required: "請輸入身份證號碼！", isIdCardNo:"請輸入正確的身份證號碼！" }, Age: { required: "請輸入年齡!", number: "請輸入數字", min: "年齡不能小於1", max: "年齡不能大於100" } }, /*錯誤提示位置*/ errorPlacement: function (error, element) { error.appendTo(element.parent()); } }) }) </script> </head> <body> <form id="form1" method="post" action=""> <div> <p> 用戶名:<input type="text" value="" name="UserName" /> </p> <p> 密碼:<input type="password" value="" name="UserPassword" /> </p> <p> 郵箱:<input type="text" value="" name="Email" /> </p> <p> 手機號碼:<input type="text" value="" name="Mobile" /> </p> <p> 身份證號碼:<input type="text" value="" name="IdCard" /> </p> <p> 年齡:<input type="text" value="" name="Age" /> </p> <p> <input type="submit" id="btn1" value="提交"></p> </div> </form> </body> </html>
后台控制器代碼:
public class HomeController : Controller { public ActionResult Index() { return View(); } [HttpGet] public ActionResult CheckUserName() { string username = HttpContext.Request.QueryString["username"]; bool succeed = true; if (username == "admin") { succeed = false; } return Json(succeed, JsonRequestBehavior.AllowGet); } }
最終效果如下圖所示
附上源代碼：源代碼