[javascript] jQuery驗證插件 - 如何創建一個簡單的自定義規則?


2 Answers

$(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"
            }
        }
    });
});
Question

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

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




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

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

並像這樣使用它:

PhoneToggle: {
    booleanRequired: 'on'
}        

希望這可以幫助




自定義規則和數據屬性

您可以使用語法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>




Related