Làm cách nào tôi có thể chỉ định một định dạng ngày tùy chỉnh để được xác thực với Plugin xác thực cho jQuery?
Làm cách nào tôi có thể chỉ định một định dạng ngày tùy chỉnh để được xác thực với Plugin xác thực cho jQuery?
Câu trả lời:
Bạn có thể tạo phương pháp xác thực tùy chỉnh của riêng mình bằng cách sử dụng addMethodhàm. Giả sử bạn muốn xác thực "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."
);
Và sau đó trên biểu mẫu của bạn thêm:
$('#myForm')
.validate({
rules : {
myDate : {
australianDate : true
}
}
})
;
myDatetên của trường nhập ngày tháng.
Câu trả lời của nickf là tốt, nhưng lưu ý rằng trình cắm xác thực đã bao gồm trình xác thực cho một số định dạng ngày khác, trong tệp tin bổ sung-method.js. Trước khi bạn viết riêng, hãy chắc chắn rằng ai đó chưa làm điều đó.
Cá nhân tôi sử dụng thư viện http://www.datejs.com/ rất tốt .
Docco tại đây: http://code.google.com/p/datejs/wiki/APIDocumentation
Bạn có thể sử dụng thông tin sau để lấy định dạng Úc của mình và sẽ xác thực ngày nhuận 29/02/2012 chứ không phải 29/02/2011:
jQuery.validator.addMethod("australianDate", function(value, element) {
return Date.parseExact(value, "d/M/yyyy");
});
$("#myForm").validate({
rules : {
birth_date : { australianDate : true }
}
});
Tôi cũng sử dụng plugin đầu vào có mặt nạ để chuẩn hóa dữ liệu http://digitalbush.com/projects/masked-input-plugin/
$("#birth_date").mask("99/99/9999");
Dưới đây là một ví dụ cho một phương pháp xác thực mới sẽ xác thực hầu hết mọi định dạng ngày, bao gồm:
Sau đó, khi bạn chuyển giá trị cho php, bạn có thể chuyển đổi nó bằng strtotime
Đây là cách thêm phương thức:
$.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!"
);
Sau đó, bạn thêm bộ lọc mới với:
$('#myForm')
.validate({
rules : {
field: {
anyDate: true
}
}
})
;
mmm, tôi đã sử dụng một chút thay đổi regex để/^(0?[1-9]|[12][0-9]|3[0-1])[/., -](0?[1-9]|1[0-2]|[a-zA-Z]{3})[/., -](19|20)?\d{2}$/
Đây là một mẫu mã cụ thể phù hợp với tôi gần đây:
// 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"
);
Tôi nên lưu ý rằng điều này thực sự thay thế quy trình xác thực ngày tích hợp, mặc dù tôi không thể thấy rằng điều này sẽ gây ra sự cố với plugin hiện tại.
Sau đó, tôi áp dụng điều này cho biểu mẫu bằng cách sử dụng:
$( '#my_form input.date' ).rules( 'add', { date: true } );
Đây là tôi kết hợp / sửa đổi các bài viết trước để đạt được kết quả mong muốn của tôi:
// 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"
);
Thêm xác thực Ngày sau khi cấu hình xác thực của bạn. Tức là sau khi gọi phương thức $ (form) .validate ({...}).
//Add date validation (if applicable)
$('.date', $(frmPanelBtnId)).each(function () {
$(this).rules('add', {
date: true
});
});
Cuối cùng, chức năng Javascript isDate chính được sửa đổi cho Định dạng Ngày của Vương quốc Anh
//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, bạn có một số lỗi cú pháp, hãy xem bên dưới, điều này phù hợp với tôi.
<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);
});
bạn có thể nhập như yyyy-mm-dd cũngyyyy/mm/dd
nhưng không thể đánh giá quy mô của tháng đôi khi chỉ 28 hoặc 29 ngày tháng 2.
Kiểm tra: jQuery Masked Input Plugin
@blasteralfred:
Tôi có quy tắc sau đây xác thực ngày chính xác cho tôi (DD MM YYYY)
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"
);
Đối với DD / MM / YYYY
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"
);
Điều này sẽ không hợp lệ vào ngày 13/01/2017 và 13/01/2017.
Và cũng không xác nhận 50 12 2017 và 50/12/2017.
Thật dễ dàng, Ví dụ: Hợp lệ cho HTML5 loại tự động = "ngày" .
<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