Jak mogę określić niestandardowy format daty do walidacji za pomocą wtyczki Validation Plugin dla jQuery?
Jak mogę określić niestandardowy format daty do walidacji za pomocą wtyczki Validation Plugin dla jQuery?
Odpowiedzi:
Możesz stworzyć własną niestandardową metodę walidacji za pomocą addMethodfunkcji. 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
}
}
})
;
myDatenazwę 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ł.
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");
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
}
}
})
;
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 } );
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;
}
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
}
}
});
});
$.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-ddrównieżyyyy/mm/dd
ale nie mogę ocenić wielkości miesiąca w lutym, tylko 28 lub 29 dni.
Sprawdź: wtyczka jQuery Masked Input
@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.
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();
}
});
});
// put your own logic here, this is just a (crappy) example