Benutzerdefiniertes Datumsformat mit jQuery-Validierungs-Plugin

Antworten:

129

Mit der addMethodFunktion können Sie Ihre eigene benutzerdefinierte Validierungsmethode erstellen . Angenommen, Sie wollten "TT / MM / JJJJ" validieren:

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

Und dann fügen Sie auf Ihrem Formular hinzu:

$('#myForm')
    .validate({
        rules : {
            myDate : {
                australianDate : true
            }
        }
    })
;
nickf
quelle
13
@ Blasteralfred:// put your own logic here, this is just a (crappy) example
Nickf
Kannst du mir eine Syntax vorschlagen, die mein erforderliches Format validiert? TT-MM-JJJJ? Ich bin ein Anfänger in jquery .. :)
Alfred
Es ist zu beachten, dass Sie myDateden Namen des Datumseingabefelds ändern sollten .
user2019515
Sie können das Beispiel reg-ex durch ersetzen. Rückgabewert.match (/ ^ (((((0 [1-9])) | (1 \ d) | (2 [0-8])) \ / ((0 [1-9]) | (1 [ 0-2]))) | ((31 \ / ((0 [13578]) | (1 [02])) | ((29 | 30) \ / ((0 [1,3-9]) | (1 [0-2]))))) \ / ((20 [0-9] [0-9]) | (19 [0-9] [0-9])) | ((29 \ / 02 \ / (19 | 20) (([02468]) | ([13579] [26]))) $ /); Dies unterstützt die Überprüfung des Schaltjahres. Z.B. 29/02/20014 wird die Validierung fehlschlagen 29/02/2016 wird die Validierung PASSIEREN.
Gavin Baumanis
58

Die Antwort von nickf ist gut, aber beachten Sie, dass das Validierungs-Plug-In bereits Validatoren für mehrere andere Datumsformate in der Datei Additional-methods.js enthält. Stellen Sie vor dem Schreiben Ihrer eigenen sicher, dass dies noch nicht geschehen ist.

Craig Stuntz
quelle
Festlegen der Regel dateISO: true, validiert das Datum im Format JJJ-MM-
TT
1
Vielen Dank! Es gibt beispielsweise "dateITA" für das Format "TT / MM / JJJJ".
Alen Siljak
22

Ich persönlich benutze die sehr gute http://www.datejs.com/ Bibliothek.

Docco hier: http://code.google.com/p/datejs/wiki/APIDocumentation

Sie können Folgendes verwenden, um Ihr australisches Format abzurufen und den Schalttag am 29.02.2012 und nicht am 29.02.2011 zu validieren:

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

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

Ich verwende auch das maskierte Eingabe-Plugin, um die Daten zu standardisieren. Http://digitalbush.com/projects/masked-input-plugin/

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

Hier ist ein Beispiel für eine neue Validierungsmethode, mit der nahezu jedes Datumsformat validiert werden kann, einschließlich:

  • TT / MM / JJ oder TT / MM / JJJJ
  • TTMMJJJ oder TTMMJJJJ
  • TT, MM, JJ oder TT, MM, JJJJ
  • TT MM JJ oder TT MM JJJJ
  • TT-MM-JJ oder TT-MM-JJJJ

Wenn Sie den Wert dann an das PHP übergeben, können Sie ihn mit strtotime konvertieren

So fügen Sie die Methode hinzu:

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

Dann fügen Sie den neuen Filter hinzu mit:

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

;;

Babailiica
quelle
und um mmm/^(0?[1-9]|[12][0-9]|3[0-1])[/., -](0?[1-9]|1[0-2]|[a-zA-Z]{3})[/., -](19|20)?\d{2}$/
Warren
13

Hier ist ein spezielles Codebeispiel, das kürzlich für mich funktioniert hat:

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

Ich sollte beachten, dass dies tatsächlich die integrierte Routine zur Datumsüberprüfung ersetzt, obwohl ich nicht sehen konnte, dass dies ein Problem mit dem aktuellen Plugin verursachen sollte.

Ich habe dies dann auf das Formular angewendet, indem ich:

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

Ich kombiniere / ändere frühere Beiträge, um mein gewünschtes Ergebnis zu erzielen:

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

Fügen Sie nach Ihrer Validierungskonfiguration eine Datumsüberprüfung hinzu. Dh nach dem Aufruf der Methode $ (form) .validate ({...}).

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

Schließlich wurde die Hauptfunktion isDate Javascript für das UK-Datumsformat geändert

//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;
}
Kwex
quelle
4

Jon, du hast einige Syntaxfehler, siehe unten, das hat bei mir funktioniert.

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

});             

Chris Love
quelle
3
$.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);

    });

Sie können wie eingeben yyyy-mm-dd auchyyyy/mm/dd

aber ich kann die Größe des Monats nicht irgendwann im Februar nur 28 oder 29 Tage beurteilen.

Mingyu
quelle
1

@blasteralfred:

Ich habe die folgende Regel zur Bestätigung des korrekten Datums für mich erhalten (TT MM JJJJ)

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"

);

Für TT / MM / JJJJ

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"

);

Dies gilt nicht für den 13.01.2017 und den 13.01.2017.

Und validiert auch nicht 50 12 2017 und 50/12/2017.

Rijo
quelle
0

Ist einfach, Beispiel: Gültig für HTML5 automatisch type = "date" .

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

});
Sergio
quelle