[英]How to validate date input in 3 fields?
我有3個日期輸入字段:
<input type="text" id="passport-doi-1" name="passport-doi-1" placeholder="DD" maxlength="2">
<input type="text" id="passport-doi-2" name="passport-doi-2" placeholder="MM" maxlength="2">
<input type="text" id="passport-doi-3" name="passport-doi-3" placeholder="YYYY" maxlength="4">
如何使用jQuery Validate插件驗證如果輸入日期,那么這是正確的嗎?
看起來我應該創建字段groups
(只有一個錯誤消息),然后是自定義驗證規則。 但它應該如何?
更新 。 我試圖做以下,但它不起作用:
$.validator.addMethod('validDate', function (value, element) {
var dd = $("#passport-doi-dd").val();
var mm = $("#passport-doi-mm").val();
var yyyy = $("#passport-doi-yyyy").val();
if (dd=="" && mm=="" && yyyy=="") return true;
try {
var date = new Date(yyyy,mm-1,dd,0,0,0,0);
return mm===(date.getMonth()+1) && dd===date.getDate() && yyyy===date.getFullYear();
}
catch(er) {
return false;
}
}, 'Please use format DD MM YYYY.');
...
rules: {
"passport-doi-dd": {
required: false,
validDate: true,
range: [1, 31]
},
"passport-doi-mm": {
required: false,
validDate: true,
range: [1, 12]
},
"passport-doi-yyyy": {
required: false,
validDate: true,
range: [1990, 2012]
}
},
messages: {
"passport-doi-dd": "Please use format DD MM YYYY.",
"passport-doi-mm": "Please use format DD MM YYYY.",
"passport-doi-yyyy": "Please use format DD MM YYYY."
}
您處於正確的軌道上 - 您需要傳遞Date
構造函數而不是字符串( val
將返回字符串)。 您還可以將params
參數用於自定義規則,使其更具可擴展性(不特定於具有特定id
的三個字段):
$.validator.addMethod("multidate", function (value, element, params) {
var daySelector = params[0]
, monthSelector = params[1]
, yearSelector = params[2]
, day = parseInt($(daySelector).val(), 10)
, month = parseInt($(monthSelector).val(), 10)
, year = parseInt($(yearSelector).val(), 10)
, date = new Date(year, month, day);
return (!$(daySelector).val() && !$(monthSelector).val() && !$(yearSelector).val()) ||
!isNaN(date.getTime());
});
$(document).ready(function () {
var dateFields = ["#passport-doi-1", "#passport-doi-2", "#passport-doi-3"];
$("#dateform").validate({
errorLabelContainer: "#errors",
groups: {
date: dateFields.join("")
},
rules: {
"passport-doi-1": {
multidate: dateFields
},
"passport-doi-2": {
multidate: dateFields
},
"passport-doi-3": {
multidate: dateFields
}
},
messages: {
"passport-doi-1": {
multidate: "Please enter a valid date"
},
"passport-doi-2": {
multidate: "Please enter a valid date"
},
"passport-doi-3": {
multidate: "Please enter a valid date"
}
}
});
});
我認為 group
選項僅用於對錯誤消息進行分組(因此您仍需要為每個輸入定義驗證規則)。
示例: http : //jsbin.com/oqawaz/9
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.