javascript - validate - jquery validation教學




jQuery驗證插件-如何創建一個簡單的自定義規則? (5)

自定義規則和數據屬性

您可以使用語法data-rule-rulename="true";創建自定義規則並使用data屬性將其附加到元素data-rule-rulename="true";

因此,要檢查是否至少選中了一組複選框中的一個:

數據規則oneormorechecked

<input type="checkbox" name="colours[]" value="red" data-rule-oneormorechecked="true" />

addMethod

$.validator.addMethod("oneormorechecked", function(value, element) {
   return $('input[name="' + element.name + '"]:checked').length > 0;
}, "Atleast 1 must be selected");

你也可以通過使用語法data-msg-rulename="my new message"來覆蓋規則的消息(即:必須至少選擇1)

注意

如果使用data-rule-rulename方法,則需要確保規則名稱全部為小寫。 這是因為jQuery驗證函數dataRules應用.toLowerCase()進行比較,並且HTML5規範不允許大寫。

工作示例

$.validator.addMethod("oneormorechecked", function(value, element) {
  return $('input[name="' + element.name + '"]:checked').length > 0;
}, "Atleast 1 must be selected");

$('.validate').validate();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>

<form class="validate">
    red<input type="checkbox" name="colours[]" value="red" data-rule-oneormorechecked="true" data-msg-oneormorechecked="Check one or more!" /><br/>
    blue<input type="checkbox" name="colours[]" value="blue" /><br/>
    green<input type="checkbox" name="colours[]" value="green" /><br/>
    <input type="submit" value="submit"/>
</form>

如何使用不使用正則表達式的jQuery Validate插件(使用addMethod )創建簡單的自定義規則?

例如,什麼函數會創建一個僅在檢查一組複選框中的至少一個時才生效的規則?


你可以通過做這樣的事情來創建一個簡單的規則:

jQuery.validator.addMethod("greaterThanZero", function(value, element) {
    return this.optional(element) || (parseFloat(value) > 0);
}, "* Amount must be greater than zero");

然後應用如下所示:

$('validatorElement').validate({
    rules : {
        amount : { greaterThanZero : true }
    }
});

只需更改'addMethod'的內容以驗證您的複選框。


您可以添加像這樣的自定義規則:

$.validator.addMethod(
"booleanRequired",
function (value, element, requiredValue) {
    return value === requiredValue;
},
"Please check your input."
);

並像這樣使用它:

PhoneToggle: {
    booleanRequired: 'on'
}        

希望這可以幫助


謝謝,它工作!

以下是最終的代碼:

$.validator.addMethod("greaterThanZero", function(value, element) {
    var the_list_array = $("#some_form .super_item:checked");
    return the_list_array.length > 0;
}, "* Please check at least one check box");

// add a method. calls one built-in method, too.
jQuery.validator.addMethod("optdate", function(value, element) {
        return jQuery.validator.methods['date'].call(
            this,value,element
        )||value==("0000/00/00");
    }, "Please enter a valid date."
);

// connect it to a css class
jQuery.validator.addClassRules({
    optdate : { optdate : true }    
});




jquery-validate