2018年6月9日 星期六

[jQuery] validate.unobtrusive 驗證(3) 自訂驗證

jquery.validate、jquery.validate.unobtrusive 自訂驗證

基本

    $.validator.addMethod 和 $.validator.unobtrusive.adapters.add
    需要在載入 DOM 之前就先執行

下面的例子包括

    不額外傳入驗證條件
    傳入一個驗證條件
    傳入多個驗證條件

不額外傳入驗證條件(ex.自定用來比對的上限/下限值)的例子，本例中假設
欄位字元長度不能超過5

validator.addMethod() 裡的 stringlengthcheck 對應到 html tag 裡的 data-val-stringlengthcheck 
<head>
    <script>
        //stringlengthcheck 是在 html tag 中對應的 data-val-stringlengthcheck
        $.validator.addMethod('stringlengthcheck', function (value, element, params) {
            //假設驗證欄位不可大於5
            return value.length <= 5;
        });
        //因為沒有要多傳參數做判斷，所以在 adapters.add 中沒有特別處理
        //為了要做 unobtrusive 的設定
        $.validator.unobtrusive.adapters.add("stringlengthcheck", function (options) {
            options.rules["stringlengthcheck"] = {
            };
            options.messages["stringlengthcheck"] = options.message;
        });
    </script>        
</head>
<body>
    <input type="text" value="" name="money" id="money" data-val="true" data-val-stringlengthcheck="字元長度限制" />
    <span data-valmsg-for="money" data-valmsg-replace="true"></span>            
</body>
傳入一個驗證條件
<head>
    <script>
        //傳入一個額外驗證條件
        //data-val-stringlengthcheck="錯誤訊息" 會觸發驗證
        //$.validator.addMethod 的 stringlengthcheck 要對應到 html tag 的 data-val-stringlengthcheck
        $.validator.addMethod('stringlengthcheck', function (value, element, params)
        {
            //驗證條件，欄位內容長度需要小於
            return value.length <= params["myMaxValue"];
        });
        //$.validator.unobtrusive.adapters.add 的 ["myMaxValue"] 對應到 html tag 的 data-val-stringlengthcheck-myMaxValue
        $.validator.unobtrusive.adapters.add("stringlengthcheck", ["myMaxValue"], function (options)
        {
            //要指定參數，在 validator 裡才接的到
            options.rules["stringlengthcheck"] = {
                myMaxValue: options.params.myMaxValue
            };
            options.messages["stringlengthcheck"] = options.message;
        });
    </script>
</head>
<body>
    <input type="text" name="myValue1" id="myValue1" 
        data-val="true" 
        data-val-stringlengthcheck="超過上限" 
        data-val-stringlengthcheck-myMaxValue=10 />
    <span data-valmsg-for="myValue1" data-valmsg-replace="true"></span>
</body>
傳入多個驗證條件 
<head>
    <script>
        $.validator.addMethod('stringlengthcheck', function (value, element, params)
        {
            return value.length >= params["myValue1"] && value.length <= params["myValue2"];
        });
        //參數用 ["myValue1","myValue2"] 對應到 html tag 就是 
        //data-val-stringlengthcheck-myValue1 和 data-val-stringlengthcheck-myValue2
        $.validator.unobtrusive.adapters.add("stringlengthcheck", ["myValue1","myValue2"], function (options)
        {
            var params ={
                myValue1: options.params.myValue1,
                myValue2: options.params.myValue2
            }
            options.rules["stringlengthcheck"] = params;
            options.messages["stringlengthcheck"] = options.message;
        });        
    </script>
</head>
<body>
    <input type="text" value="" name="myValue" id="myValue" data-val="true" 
        data-val-stringlengthcheck="超過上下限"
        data-val-stringlengthcheck-myValue1=1
        data-val-stringlengthcheck-myValue2=2 />
    <span data-valmsg-for="myValue" data-valmsg-replace="true"></span>
</body>
張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)