programing

jQuery 검증 플러그인을 사용한 사용자 지정 날짜 형식

skycolor 2023. 10. 14. 09:59
반응형

jQuery 검증 플러그인을 사용한 사용자 지정 날짜 형식

validation plugin for jQuery로 유효성 검사할 사용자 지정 날짜 형식을 지정하려면 어떻게 해야 합니까?

해당 기능을 사용하여 사용자 지정 유효성 검사 방법을 직접 작성할 수 있습니다."dd/mm/yyyy"의 유효성을 확인하고 싶었다고 가정합니다.

$.validator.addMethod(
    "australianDate",
    function(value, element) {
        // put your own logic here, this is just a (crappy) example
        return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
    },
    "Please enter a date in the format dd/mm/yyyy."
);

그런 다음 양식에 다음을 추가합니다.

$('#myForm')
    .validate({
        rules : {
            myDate : {
                australianDate : true
            }
        }
    })
;

nickf의 답변은 좋으나 유효성 검사 플러그인에는 이미 여러 다른 날짜 형식의 검사기가 추가- methods.js 파일에 포함되어 있습니다.자신의 것을 쓰기 전에, 누군가가 이미 그것을 하지 않았는지 확인하세요.

저는 개인적으로 아주 좋은 http://www.datejs.com/ 라이브러리를 이용합니다.

문서: http://code.google.com/p/datejs/wiki/APIDocumentation

다음을 사용하여 호주 형식을 얻을 수 있으며, 29/02/2011이 아닌 29/02/2012 도약일을 검증합니다.

jQuery.validator.addMethod("australianDate", function(value, element) { 
    return Date.parseExact(value, "d/M/yyyy");
});

$("#myForm").validate({
   rules : {
      birth_date : { australianDate : true }
   }
});

마스크드 입력 플러그인을 사용하여 데이터 http://digitalbush.com/projects/masked-input-plugin/ 을 표준화합니다.

$("#birth_date").mask("99/99/9999");

다음은 다음과 같은 거의 모든 날짜 형식의 유효성을 검사하는 새로운 유효성 검사 방법의 예입니다.

  • dd/mm/yyy 또는 dd/mm/yyyyyy
  • dd.mm .yy 또는 dd.mm .야이이이이이이이이이이이이이이이이이이에
  • dd,mm,yyy or dd,mm,yyyyy
  • ddmmyy 또는 ddmmyyy
  • dd-mm-yyy 또는 dd-mm-yyyyyy

그러면 pph에 값을 전달하면 str to time으로 변환할 수 있습니다.

메소드를 추가하는 방법은 다음과 같습니다.

    $.validator.addMethod("anyDate",
    function(value, element) {
        return value.match(/^(0?[1-9]|[12][0-9]|3[0-1])[/., -](0?[1-9]|1[0-2])[/., -](19|20)?\d{2}$/);
    },
    "Please enter a date in the format!"
);

그런 다음 새 필터를 다음과 같이 추가합니다.

$('#myForm')
.validate({
    rules : {
        field: {
            anyDate: true
        }
    }
})

;

최근에 제게 도움이 된 특정 코드 샘플은 다음과 같습니다.

// Replace the builtin US date validation with UK date validation
$.validator.addMethod(
    "date",
    function ( value, element ) {
        var bits = value.match( /([0-9]+)/gi ), str;
        if ( ! bits )
            return this.optional(element) || false;
        str = bits[ 1 ] + '/' + bits[ 0 ] + '/' + bits[ 2 ];
        return this.optional(element) || !/Invalid|NaN/.test(new Date( str ));
    },
    "Please enter a date in the format dd/mm/yyyy"
);

이것이 내장된 날짜 확인 루틴을 실제로 대체한다는 점에 유의해야 하지만, 이것이 현재 플러그인에 문제를 일으킬 것이라고는 볼 수 없었습니다.

그런 다음 다음 다음을 사용하여 양식에 적용했습니다.

$( '#my_form input.date' ).rules( 'add', { date: true } );

제가 원하는 결과를 얻기 위해 이전 게시물을 결합/수정하는 것입니다.

        // Override built-in date validator
        $.validator.addMethod(
            "date",
            function (value, element) {
                //Return            NB: isRequired is not checked at this stage
                return (value=="")? true : isDate(value);
            },
            "* invalid"
        );

유효성 검사 구성 뒤에 날짜 유효성 검사를 추가합니다.즉, $(폼)을 부른 후에.({ 검증...}) 메서드입니다.

        //Add date validation (if applicable)
        $('.date', $(frmPanelBtnId)).each(function () {
            $(this).rules('add', {
                date: true
            });
        });

마지막으로 메인은 UK Date Format을 위해 수정된 Date Javascript 기능입니다.

//Validates a date input -- http://jquerybyexample.blogspot.com/2011/12/validate-date-    using-jquery.html
function isDate(txtDate) {
    var currVal = txtDate;
    if (currVal == '')
       return false;

  //Declare Regex  
  var rxDatePattern = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/;
  var dtArray = currVal.match(rxDatePattern); // is format OK?

  if (dtArray == null)
      return false;

   //Checks for dd/mm/yyyy format.
   var dtDay = dtArray[1];
   var dtMonth = dtArray[3];
   var dtYear = dtArray[5];

  if (dtMonth < 1 || dtMonth > 12)
      return false;
  else if (dtDay < 1 || dtDay > 31)
      return false;
  else if ((dtMonth == 4 || dtMonth == 6 || dtMonth == 9 || dtMonth == 11) && dtDay == 31)
      return false;
  else if (dtMonth == 2) {
      var isleap = (dtYear % 4 == 0 && (dtYear % 100 != 0 || dtYear % 400 == 0));
      if (dtDay > 29 || (dtDay == 29 && !isleap))
          return false;
  }

  return true;
}

존, 구문 오류가 좀 있네요, 아래를 보세요. 저한테 효과가 있었어요.

  <script type="text/javascript">
$(document).ready(function () {

  $.validator.addMethod(
      "australianDate",
      function (value, element) {
        // put your own logic here, this is just a (crappy) example 
        return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
      },
      "Please enter a date in the format dd/mm/yyyy"
    );

  $('#testForm').validate({
    rules: {
      "myDate": {
        australianDate: true
      }
    }
  });

});             

$.validator.addMethod("mydate", function (value, element) {

        return this.optional(element) || /^(\d{4})(-|\/)(([0-1]{1})([1-2]{1})|([0]{1})([0-9]{1}))(-|\/)(([0-2]{1})([1-9]{1})|([3]{1})([0-1]{1}))/.test(value);

    });

다음과 같이 입력할 수 있습니다.yyyy-mm-dd또한.yyyy/mm/dd

하지만 2월 28일이나 29일 중에 그 달의 크기를 판단할 수는 없습니다.

@블라스터 알프레드:

정확한 날짜를 확인하는 규칙을 받았습니다(DDMM MYYYYY).

jQuery.validator.addMethod(
"validDate",
function(value, element) {
    return value.match(/(?:0[1-9]|[12][0-9]|3[01]) (?:0[1-9]|1[0-2]) (?:19|20\d{2})/);
},
"Please enter a valid date in the format DD MM YYYY"

);

DD/MM/YYY용

jQuery.validator.addMethod(
"validDate",
function(value, element) {
    return value.match(/(?:0[1-9]|[12][0-9]|3[01])\/(?:0[1-9]|1[0-2])\/(?:19|20\d{2})/);
},
"Please enter a valid date in the format DD/MM/YYYY"

);

0113 2017 및 01/13/2017은 유효하지 않습니다.

또한 5012 2017 및 50/12/2017의 유효성을 검사하지 않습니다.

쉬운가요, 예: HTML5 자동 유형="날짜"에 유효합니다.

<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/additional-methods.min.js"></script>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/localization/messages_es.js"></script>

$(function () {

        // Overload method default "date" jquery.validate.min.js
        $.validator.addMethod(
            "date",
            function(value, element) {
                var dateReg = /^\d{2}([./-])\d{2}\1\d{4}$/;
                return value.match(dateReg);
            },
            "Invalid date"
        );

     // Form Demo jquery.validate.min.js
     $('#form-datos').validate({
        submitHandler: function(form) {
            form.submit();
        }
    });

});

언급URL : https://stackoverflow.com/questions/511439/custom-date-format-with-jquery-validation-plugin

반응형