[JQUERY] jQuery를 검증 플러그인 - 어떻게 간단한 사용자 지정 규칙을 만드는 방법?

jQuery를 검증 플러그인 - 어떻게 간단한 사용자 지정 규칙을 만드는 방법?

해결법

1. ---

   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'의 내용을 변경할 수 있습니다.

2. ---

   2.

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

3. ---

   3.

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

4. ---

   4.사용자 지정 규칙을 만들 수 있고 = "true"로 구문 데이터 규칙 rulename를 사용하여 데이터 속성을 사용하여 요소에 첨부;

   사용자 지정 규칙을 만들 수 있고 = "true"로 구문 데이터 규칙 rulename를 사용하여 데이터 속성을 사용하여 요소에 첨부;

   체크 박스의 그룹 중 적어도 하나가 선택되어 경우에 따라서 확인 :

   데이터 규칙 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");
   

   구문 데이터-MSG-rulename = "나의 새로운 메시지"를 사용하여 : (선택해야이어야 1 예) 그리고 당신은 또한 규칙의 메시지를 무시할 수 있습니다.

   노트

   당신은 데이터 규칙 rulename 방법을 사용하는 경우에 당신은 반드시 규칙 이름이 모두 소문자로되어 있는지 확인해야합니다. JQuery와 유효성 검사 기능 dataRules ()를 비교하고 HTML5 스펙은 대문자를 허용하지 않습니다 .toLowerCase을 적용하기 때문이다.

   작업 예

   $ .validator.addMethod은 (함수 (값, 요소) { "oneormorechecked" . $ ( '입력 [이름 = "'+ element.name + '"] : 체크')를 호출 길이> 0; }) "이어야 하나가 선택되어야한다"; ( '유효성 검사를.') $ 유효성 검사를 ().; <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js">

   빨간색 <입력 유형 = "체크 박스"이름 = "색상 []"값 = "빨간색"데이터 규칙 oneormorechecked = "true"로 데이터-MSG-oneormorechecked = "하나 이상을 확인하라!" />
   블루
   녹색
   

5. ---

   5.감사합니다, 그것은했다!

   감사합니다, 그것은했다!

   여기에 최종 코드는 다음과 같습니다

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

6. ---

   6.이 같은 사용자 정의 규칙을 추가 할 수 있습니다 :

   이 같은 사용자 정의 규칙을 추가 할 수 있습니다 :

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

   그리고이 같은 규칙으로 추가 :

   PhoneToggle: {
       booleanRequired: 'on'
   }        
   

7. ---

   7.이 경우의 경우 : 사용자 등록 양식, 사용자는 촬영되지 않은 사용자 이름을 선택해야합니다.

   이 경우의 경우 : 사용자 등록 양식, 사용자는 촬영되지 않은 사용자 이름을 선택해야합니다.

   이 방법은 우리가 HTTP 비동기 원격 서버로 요청을 전송하는 사용자 정의 유효성 검사 규칙을 만들어야합니다.

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

     $("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'
         },
       },
   

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

from https://stackoverflow.com/questions/241145/jquery-validate-plugin-how-to-create-a-simple-custom-rule by cc-by-sa and MIT license