Jak mogę określić niestandardowy format daty do walidacji za pomocą wtyczki Validation Plugin dla jQuery?
84
Jak mogę określić niestandardowy format daty do walidacji za pomocą wtyczki Validation Plugin dla jQuery?
Możesz stworzyć własną niestandardową metodę walidacji za pomocą addMethod
funkcji. Załóżmy, że chcesz zweryfikować „dd / mm / rrrr”:
$.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."
);
A następnie w formularzu dodaj:
$('#myForm')
.validate({
rules : {
myDate : {
australianDate : true
}
}
})
;
// put your own logic here, this is just a (crappy) example
myDate
nazwę pola wprowadzania daty.Odpowiedź nickfa jest dobra, ale zwróć uwagę, że wtyczka walidacyjna zawiera już walidatory dla kilku innych formatów dat w pliku additional-methods.js. Zanim napiszesz własną, upewnij się, że ktoś jeszcze tego nie zrobił.
źródło
Osobiście korzystam z bardzo dobrej biblioteki http://www.datejs.com/ .
Docco tutaj: http://code.google.com/p/datejs/wiki/APIDocumentation
Możesz skorzystać z poniższych, aby uzyskać format australijski i zweryfikować dzień przestępny 29/02/2012, a nie 29/02/2011:
jQuery.validator.addMethod("australianDate", function(value, element) { return Date.parseExact(value, "d/M/yyyy"); }); $("#myForm").validate({ rules : { birth_date : { australianDate : true } } });
Używam również wtyczki z maskowanym wejściem, aby ustandaryzować dane http://digitalbush.com/projects/masked-input-plugin/
$("#birth_date").mask("99/99/9999");
źródło
Oto przykład nowej metody walidacji, która zweryfikuje prawie każdy format daty, w tym:
Następnie, gdy przekazujesz wartość do php, możesz ją przekonwertować za pomocą strtotime
Oto jak dodać metodę:
$.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!" );
Następnie dodajesz nowy filtr z:
$('#myForm') .validate({ rules : { field: { anyDate: true } } })
;
źródło
mmm
, nieznacznie zmodyfikowałem wyrażenie regularne na/^(0?[1-9]|[12][0-9]|3[0-1])[/., -](0?[1-9]|1[0-2]|[a-zA-Z]{3})[/., -](19|20)?\d{2}$/
Oto konkretny przykład kodu, który ostatnio działał dla mnie:
// 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" );
Powinienem zauważyć, że faktycznie zastępuje to wbudowaną procedurę sprawdzania poprawności daty, chociaż nie widziałem, że powinno to spowodować problem z obecną wtyczką.
Następnie zastosowałem to do formularza za pomocą:
$( '#my_form input.date' ).rules( 'add', { date: true } );
źródło
To ja łączę / modyfikuję poprzednie posty, aby osiągnąć pożądany rezultat:
// 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" );
Dodaj walidację daty po konfiguracji walidacji. To znaczy po wywołaniu metody $ (form) .validate ({...}).
//Add date validation (if applicable) $('.date', $(frmPanelBtnId)).each(function () { $(this).rules('add', { date: true }); });
Wreszcie główna funkcja isDate Javascript została zmodyfikowana dla formatu daty w Wielkiej Brytanii
//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; }
źródło
Jon, masz kilka błędów składniowych, zobacz poniżej, to zadziałało dla mnie.
<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 } } }); });
źródło
$.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); });
możesz wprowadzić jak
yyyy-mm-dd
równieżyyyy/mm/dd
ale nie mogę ocenić wielkości miesiąca w lutym, tylko 28 lub 29 dni.
źródło
Sprawdź: wtyczka jQuery Masked Input
źródło
@blasteralfred:
Otrzymałem następującą regułę potwierdzającą prawidłową datę dla mnie (DD MM RRRR)
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"
);
Dla DD / MM / RRRR
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"
);
To nie będzie walidować 01 13 2017 i 01/13/2017.
A także nie sprawdza poprawności 50 12 2017 i 50/12/2017.
źródło
To proste, przykład: Prawidłowe dla automatycznego typu HTML5 = "data" .
<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(); } }); });
źródło