標籤：style blog http color java 使用 os io
一、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、說明：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); } }
最重效果如所示
附上原始碼：原始碼
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
