1. 程式人生 > >JQuery Validate 的自定義檢查使用方法

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>