jQuery 플러그인 확인 - 간단한 사용자 지정 규칙을 만드는 방법

jQuery 플러그인 확인 - 간단한 사용자 지정 규칙을 만드는 방법

regex를 사용하지 않는 jQuery Validate 플러그인(를 사용)을 사용하여 간단한 커스텀 규칙을 작성하려면 어떻게 해야 합니까?

예를 들어 체크박스 그룹 중 적어도1개가 선택되어 있는 경우에만 유효성을 확인하는 규칙을 작성하는 함수는 무엇입니까?

다음과 같이 간단한 규칙을 만들 수 있습니다.

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」의 내용을 변경해 주세요.

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

사용자 지정 규칙 및 데이터 속성

커스텀 규칙을 생성하여 이를 요소에 부가할 수 있습니다.data구문을 사용한 속성data-rule-rulename="true";

체크박스 그룹 중 적어도1개가 켜져 있는지 여부를 확인하려면 다음 절차를 수행합니다.

데이터 규칙 확인

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

add Method(추가 방법)

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

또한 규칙의 메시지를 재정의할 수도 있습니다(즉, 구문을 사용하여 최소 1개를 선택해야 합니다).data-msg-rulename="my new message".

메모

를 사용하는 경우data-rule-rulenamemethod는 규칙명이 모두 소문자인지 확인해야 합니다.이는 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>

고마워, 성공했어!

최종 코드는 다음과 같습니다.

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

다음과 같은 커스텀 규칙을 추가할 수 있습니다.

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

그리고 다음과 같은 규칙으로 추가합니다.

PhoneToggle: {
    booleanRequired: 'on'
}        

이 경우: 사용자 등록 폼에서는 사용자가 사용하지 않는 사용자 이름을 선택해야 합니다.

즉, 리모트서버와의 비동기 http 요구를 송신하는 커스터마이즈된 검증 규칙을 작성해야 합니다.

1. html에 입력 요소를 만듭니다.

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

2. 폼 검증 규칙을 선언합니다.

  $("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. 리모트 코드는 다음과 같습니다.

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

순서 1 CDN을 포함하다

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

     <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

순서 2 코드 Like

  $(document).ready(function(){
        $("#submit").click(function () {
              $('#myform').validate({ // initialize the plugin
                rules: {
                    id: {
                        required: true,
                        email: true
                    },
                    password: {
                        required: true,
                        minlength: 1
                    }
                },
                messages: {
                    id: {
                        required: "Enter Email Id"

                    },
                    password: {
                        required: "Enter Email Password"

                    }
                },
                submitHandler: function (form) { // for demo
                    alert('valid form submitted'); // for demo
                    return false; // for demo
                }
            });
       }):
  }); 

언급URL : https://stackoverflow.com/questions/241145/jquery-validate-plugin-how-to-create-a-simple-custom-rule