jQuery Validate Plugin - Basit bir özel kural nasıl oluşturulur?

Normal ifade kullanmayan jQuery Validate eklentisini (kullanarak addMethod) kullanarak basit, özel bir kural nasıl oluşturulur ?

Örneğin, hangi işlev yalnızca bir grup onay kutusundan en az biri işaretlenirse geçerli olan bir kural oluşturur?

Bunun gibi bir şey yaparak basit bir kural oluşturabilirsiniz:

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

Ve sonra bunu şöyle uygulayın:

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

Onay kutularınızı doğrulamak için 'addMethod' içeriğini değiştirmeniz yeterlidir.

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

// 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 }    
});

Özel Kural ve veri özelliği

Özel bir kural oluşturabilir ve bunu kullanarak bir öğeye ekleyebilirsiniz. data ve sözdizimini kullanarak özelliği kullanarakdata-rule-rulename="true";

Bu nedenle, bir grup onay kutusundan en az birinin işaretli olup olmadığını kontrol etmek için:

veri kural 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");

Ayrıca , sözdizimini kullanarak bir kuralın iletisini geçersiz kılabilirsiniz (örneğin: En az 1 seçilmelidir) . data-msg-rulename="my new message" .

NOT

data-rule-rulenameYöntemi kullanırsanız, kural adının tamamen küçük olduğundan emin olmanız gerekir. JQuery doğrulama işlevi Bunun nedeni dataRulesde geçerlidir .toLowerCase()karşılaştırabilir ve HTML5 büyük harfe izin vermemesidir.

Çalışma Örneği

$.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>

Teşekkürler, işe yaradı!

İşte son kod:

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

Bunun gibi özel bir kural ekleyebilirsiniz:

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

Ve böyle bir kural olarak ekleyin:

PhoneToggle: {
    booleanRequired: 'on'
}        

Bu durumda: kullanıcı kayıt formu, kullanıcının alınmayan bir kullanıcı adı seçmesi gerekir.

Bu, uzak sunucu ile zaman uyumsuz http isteği gönderecek özelleştirilmiş bir doğrulama kuralı oluşturmamız gerektiği anlamına gelir.

1. html'nizde bir giriş öğesi oluşturun:

<input name="user_name" type="text" >

2. form doğrulama kurallarınızı beyan edin:

  $("form").validate({
    rules: {
      'user_name': {
        //  here jquery validate will start a GET request, to 
        //  /interface/users/is_username_valid?user_name=<input_value>
        //  the response should be "raw text", with content "true" or "false" only
        remote: '/interface/users/is_username_valid'
      },
    },

3. uzaktan kod şöyle olmalıdır:

class Interface::UsersController < ActionController::Base
  def is_username_valid
    render :text => !User.exists?(:user_name => params[:user_name])
  end
end