jQuery Validate Plugin-如何建立簡單的自定義規則？

如何使用不使用正則表達式的jQuery Validate插件（使用addMethod ）建立簡單的自定義規則？

例如，什麼功能會建立僅在選中一組複選框中的至少一個時才驗證的規則？

---

#1樓

$(document).ready(function(){
    var response;
    $.validator.addMethod(
        "uniqueUserName", 
        function(value, element) {
            $.ajax({
                type: "POST",
                url: "http://"+location.host+"/checkUser.php",
                data: "checkUsername="+value,
                dataType:"html",
                success: function(msg)
                {
                    //If username exists, set response to true
                    response = ( msg == 'true' ) ? true : false;
                }
             });
            return response;
        },
        "Username is Already Taken"
    );

    $("#regFormPart1").validate({
        username: {
            required: true,
            minlength: 8,
            uniqueUserName: true
        },
        messages: {
            username: {
                required: "Username is required",
                minlength: "Username must be at least 8 characters",
                uniqueUserName: "This Username is taken already"
            }
        }
    });
});

---

#2樓

您能夠經過執行如下操做來建立一條簡單的規則：

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」的內容便可驗證您的複選框。

---

#3樓

謝謝，成功了！

這是最終代碼：

$.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");

---

#4樓

自定義規則和數據屬性

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

所以，要檢查是否至少選中了一組複選框：

數據規則一項或更多項

<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"覆蓋規則消息（即，必須選擇Atleast 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>

---

#5樓

您能夠添加以下自定義規則：

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

並按以下規則添加它：

PhoneToggle: {
    booleanRequired: 'on'
}