jQuery插件之validate

時間 2019-11-11

原文原文鏈接

1、jQuery.validate.js插件用於對錶單輸入進行驗證，其使用配置很是簡單。支持多事件觸發，自帶多種驗證規則，還支持自定義驗證規則。javascript

　　一、配置方法。html

　　先導入jQuery庫，而後導入Validate插件，若是是中文提示還須要導入messages_zh.js。java

　　注意Validate的導入要在jQuery庫以後。代碼以下：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>

　　而後只要定義驗證規則和指定錯誤提示位置就能夠了。ajax

　　在$(document).ready()里加入驗證規則與錯誤提示位置，代碼以下：app

   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" />&nbsp;&nbsp;
　　　　　　<input id="btnReset" type="button" value="取消" class="btn" />&nbsp;&nbsp;
　　　　</div>
　　</form>

　　這樣就完成了很是簡單的表單驗證功能，當表單填寫不正確時Validate在<input>的兄弟<span>元素裏顯示錯誤提示。異步

　　二、說明：jQuery.validate.js插件與<input>的關聯使用的是表單的name屬性。只有存在name屬性的<input>才能驗證！post

2、自定義錯誤提示位置，當咱們想設置錯誤提示的顯示位置怎麼設置呢？ui

答案就是在errorPlacement參數裏，你能夠按照本身的須要自定義書寫，用的是jQueryspa

          /*錯誤提示位置*/
          errorPlacement:function(error,element){　　//第一個參數是錯誤的提示文字，第二個參數是當前輸入框
               error.appendTo(element.siblings("span"));　　//用的是jQuery，這裏設置的是，錯誤提示文本顯示在當前文本框的兄弟span中
          }

3、自定義錯誤提示信息，例如當咱們有多個require:true選項，我想根據不一樣的選項設置不一樣的提示怎麼辦呢？

答案就是在messages參數裏。用層層嵌套的方式設置本身須要的提示信息。若是某個字段沒有message信息，這時才調用默認的提示信息。

            messages: { 
                UserName: { 
                    required: "請輸入用戶名！"　　//注意，一樣是必填項，可是優先顯示在messages裏的提示信息
                },
                Email:{
                    required:"請輸入郵箱地址!"　　//不會統一輸出 必填字段 了哦
                }
            }

實際上，jQuery.Validate默認的錯誤提示是生成一個class=error的label，因此，若是想設置樣式，最簡單的方法就是針對這個label設置就OK了，固然默認的label是能夠手動更改的。

4、當須要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);
        }
    }

最重效果以下圖所示

附上源代碼：源代碼