jQuery驗證插件validate使用詳解

2019-11-20 10:06:14

字體：大中小

來源：轉載

供稿：網友

一、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);    }  }

最終效果如下圖所示：