JQuery Validate 的自定義檢查使用方法

一、導入js

菜鳥教程提供的 1.14.0 版本下載地址：http://static.runoob.com/download/jquery-validation-1.14.0.zip

<script src="~/assets/js/jquery-2.1.0.min.js"></script>
<script src="~/assets/js/jquery.validate.js"></script>
<script src="~/assets/js/messages_zh.js"></script>

二、檢測後常規默認操作方法

在同一個試圖頁是不可以寫兩個該方法，因爲默認操作有兩個的話，在界面檢測後，沒有辦法判別是哪一個默認方法。所以，如果一個界面有多個模塊檢測，最好使用下面第三點方法。

 <!--檢測-->
 <!--AJAX提交信息-->
    <script>
    //validate 的默認值
    $.validator.setDefaults({
        submitHandler: function () {
          alert("此處寫驗證後要寫的操作");
        }
    });

    //普通管理員界面
    $().ready(function () {
        $("#Forms").validate({
            rules: {
                字段名1: {
                    required: true,
                    isIp: true
                },
                字段名2: {
                    required: true
                }
            },
            //如果默認就不用寫messages
            //自定義就寫上
            messages: {
                字段名1: {
                    required: "請輸入鏈接字符串",
                    isIp: "字符串格式錯誤，請按照XXX.XXX.XXX.XXX格式輸入"
                }
            }
        });
        //自定義檢測方法
        jQuery.validator.addMethod("isIp", function (value, element) {
            var Ip = /((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/;
            return this.optional(element) || Ip.test(value);
        }, "請正確填寫!");
    });
    </script>
    <style>
        .error {
            color: red;
        }
    </style>
    <!--檢測結束-->

三、檢測後不用默認的方法操作

這種方法具有針對模塊性，適合多個模塊一起操作~~

<script>   
    $().ready(function () {
        $("#Forms").validate({
            submitHandler: function(form) {
                alert("這裏寫入檢測正確後的操作喲~~");
               
            },
//-------------------------------下面檢測方法同上---------------------------------------
            rules: {
                
            },
            messages: {
                
            }
        });
        jQuery.validator.addMethod("isIp", function (value, element) {
            var Ip = /((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/;
            return this.optional(element) || Ip.test(value);
        }, "請正確填寫!");        
    });
</script>