Plugin xác thực jQuery - Làm cách nào để tạo quy tắc tùy chỉnh đơn giản?

Làm cách nào để bạn tạo một quy tắc tùy chỉnh, đơn giản bằng cách sử dụng plugin Xác thực jQuery (sử dụng addMethod) không sử dụng biểu thức chính quy?

Ví dụ, chức năng nào sẽ tạo quy tắc chỉ xác nhận nếu ít nhất một trong số các nhóm hộp kiểm được chọn?

Bạn có thể tạo một quy tắc đơn giản bằng cách thực hiện một cái gì đó như thế này:

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

Và sau đó áp dụng như vậy:

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

Chỉ cần thay đổi nội dung của 'addMethod' để xác thực các hộp kiểm của bạn.

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

Quy tắc tùy chỉnh và thuộc tính dữ liệu

Bạn có thể tạo quy tắc tùy chỉnh và đính kèm quy tắc đó vào một phần tử bằng datacách sử dụng cú phápdata-rule-rulename="true";

Vì vậy, để kiểm tra nếu ít nhất một trong số các nhóm hộp kiểm tra được chọn:

data-rule-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");

Và bạn cũng có thể ghi đè thông điệp của quy tắc (ví dụ: Phải chọn Atleast 1) bằng cách sử dụng cú pháp data-msg-rulename="my new message".

GHI CHÚ

Nếu bạn sử dụng data-rule-rulenamephương thức thì bạn sẽ cần đảm bảo tên quy tắc là tất cả chữ thường. Điều này là do chức năng xác thực jQuery dataRulesáp dụng .toLowerCase()để so sánh và thông số HTML5 không cho phép viết hoa.

Ví dụ làm việc

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

Cảm ơn, nó đã làm việc!

Đây là mã cuối cùng:

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

Bạn có thể thêm một quy tắc tùy chỉnh như thế này:

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

Và thêm nó như một quy tắc như thế này:

PhoneToggle: {
    booleanRequired: 'on'
}        

Đối với trường hợp này: hình thức đăng ký người dùng, người dùng phải chọn tên người dùng không được sử dụng.

Điều này có nghĩa là chúng ta phải tạo quy tắc xác thực tùy chỉnh, sẽ gửi yêu cầu http không đồng bộ với máy chủ từ xa.

1. tạo một yếu tố đầu vào trong html của bạn:

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

2. khai báo quy tắc xác thực mẫu của bạn:

  $("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. mã từ xa phải như sau:

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