出生日期验证持续显示 [英] Date of Birth validation keeps showing
问题描述
我在文本框中输入DOB
-22/12/1986
,验证一直有效.它说:
I am typing a DOB
- 22/12/1986
into my text box and the validation keeps firing. It says:
The field DOB must be a date.
我的模型:
[System.ComponentModel.DisplayName("DOB")]
[DisplayFormat(DataFormatString = "@{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
[Required(ErrorMessage = "Date Of Birth is required")]
[RegularExpression(@"{0:dd/MM/yyyy}", ErrorMessage = "Invalid Date")] // below is a link
public DateTime DOB { get; set; }
我的查看:
<div class="form-group">
@Html.LabelFor(model => model.DOB, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.DOB, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.DOB, "", new { @class = "text-danger" })
</div>
</div>
在MS SQL database
中,该字段为:DateTime
为什么我的验证说我输入的日期无效?
Why does my validation say that the date i type in is invalid?
推荐答案
进行客户端验证的原因是,jquery.validate.unobtrusive.js
使用的jquery.validate.js
插件根据MM/dd/yyyy
格式验证日期,并根据dd/MM/yyyy
格式.
The reason for the client side validation is that the jquery.validate.js
plugin used by jquery.validate.unobtrusive.js
validates dates based on MM/dd/yyyy
format and your entering dates based on a dd/MM/yyyy
format.
jquery.validate.js
中用于验证的特定代码是
The specific code used in jquery.validate.js
for validation is
date: function(value, element) {
return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
}
这取决于您使用的浏览器会给出不同的结果(在Chrome中,new Date('22/12/1986')
返回Invalid Date
,但是在FireFox中,它返回有效的1987-10-11T13:30:00.000Z
,只是您输入的日期无效)
which depending on the browser your using will give different results (in Chrome, new Date('22/12/1986')
returns Invalid Date
but in FireFox it returns 1987-10-11T13:30:00.000Z
which is valid, just not the date you entered)
您需要覆盖$.validator
才能设置区域性格式的日期.一种选择是使用 jquery.globalize 插件.
You need to override the $.validator
to format dates in your culture. One option is to use the jquery.globalize plugin.
或者,您可以编写自己的脚本.请注意,以下脚本取自我自己的插件,该插件与生成日期选择器的@Html.DatePickerFor()
扩展方法结合使用.扩展方法基于服务器区域性为日期格式添加html属性,并使用我已注释掉并用您的硬编码格式替换的var format = regex.exec(this.inputFormat);
代码行读取.如果您只想使用dd/MM/yyyy
格式,则可以简化脚本,因为您只需要'little-endian'格式
Alternatively you can write your own script. Note that the following script is taken from my own plugin used in conjunction with a @Html.DatePickerFor()
extension method that generates a datepicker. The extension method adds html attributes for the date format based on the server culture and is read with the var format = regex.exec(this.inputFormat);
line of code that I have commented out and replaced with your hard coded format. If you only ever want the dd/MM/yyyy
format, then the script can be simplified because you only need the 'little-endian' format
<script type="text/javascript">
// Override default date validator format to allow culture specific format
$.validator.methods.date = function (value, element) {
return this.optional(element) || globalDate(value).isValid();
};
globalDate = function (value) {
// Initialise a new date
var date = new Date(0);
if (value == undefined) {
// Return todays date
return date;
}
// Get the components of the format
// The separator can be forward slash, hyphen, dot and/or space
var regex = new RegExp(/([dMy]+)([\s/.-]+)([dMy]+)([\s/.-]+)([dMy]+)/);
//------------- see notes above
//var format = regex.exec(this.inputFormat);
var format = regex.exec('dd/MM/yyyy');
//-------------
// Get the components of the value
regex = new RegExp(/(\d+)([\s/.-]+)(\d+)([\s/.-]+)(\d+)/);
value = regex.exec(value);
// Check the value is valid
if (value === null || value[2] !== format[2] || value[4] !== format[4]) {
// Its not valid
date.setTime(Number.NaN);
return date;
}
// TODO: What if year entered as 2 digits?
var day = Number.NaN;
var month = Number.NaN;
var year = Number.NAN;
if (format[1].charAt(0) === 'd') {
// little-endian (day, month, year)
day = parseInt(value[1]);
month = parseInt(value[3]) - 1;
year = parseInt(value[5]);
} else if (format[1].charAt(0) === 'M') {
// middle-endian (month, day, year)
day = parseInt(value[3]);
month = parseInt(value[1]) - 1;
year = parseInt(value[5]);
} else {
// big endian (year, month, day)
day = parseInt(value[5]);
month = parseInt(value[3]) - 1;
year = parseInt(value[1]);
}
date.setFullYear(year);
date.setMonth(month);
date.setDate(day);
// Check its valid
if (date.getDate() !== day || date.getMonth() !== month || date.getFullYear() !== year) {
date.setTime(Number.NaN);
return date;
}
return date;
}
// Methods
Date.prototype.isValid = function () {
return !isNaN(this.getTime());
}
</script>
旁注:您的[RegularExpression]
属性不执行任何操作,可以将其删除.
Side note: Your [RegularExpression]
attribute does nothing and can be removed.
这篇关于出生日期验证持续显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!