如何使用jquery验证器的日期月年三个文本框验证出生日期
how to validate Date of birth with three textbox of date month year by jquery validator
我需要通过使用jquery验证器来验证出生日期,其中包含三个单独的日月和年文本框。
如何做到这一点,请帮忙。
网页代码
<input type="text" maxlength="2" placeholder="DD" class="dob-day fillone" name="dob-day" id="dob-day" data-fieldgroup="dob" data-fillone-field="true" />
<input type="text" maxlength="2" placeholder="MM" id="dob-month" class="dob-month fillone" data-fieldgroup="dob" data-fillone-field="true">
<input type="text" maxlength="4" placeholder="YYYY" class="dob-year fillone" id="dob-year" data-fieldgroup="dob" data-fillone-field="true">
我正在使用数据组对文本框进行分组
应为此创建自定义验证方法,同时使用 validate 提供的 groups
选项:
/* Custom validation method to validate a date based on several fields: */
$.validator.addMethod("datemultiple", 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),
dateEntered = new Date(year, month - 1, day);
return this.optional(element) || !isNaN(dateEntered.valueOf());
}, "Please enter a valid date");
$(document).ready(function() {
$("#myform").validate({
groups: {
/* Only display one validation message for day, month, and year: */
dateOfBirth: "dob-day dob-month dob-year"
},
rules: {
'dob-day': {
required: true,
datemultiple: ["#dob-day", "#dob-month", "#dob-year"]
},
'dob-month': {
required: true
}
},
/* Place error messages after the "year" field */
errorPlacement: function ($error, $element) {
if ($element.data("fieldgroup") === "dob") {
$error.insertAfter("#dob-year");
}
}
});
});
示例:http://jsfiddle.net/xHC86/
我写了一个处理数据是否有效的Javascript模块,你可以在JSFiddle链接中查看一个完整的工作示例。
http://jsfiddle.net/dceast/vmHjN/
下面是执行验证的模块:
var compareDate, checkDates = false;
var validateObject = {
init: function(year, month, day) {
return this.compareDate.init(year, month, day);
},
compareDate: {
init: function(year, month, day) {
var isValid = false;
// Compensate for zero based index, if month was not
// subtracted from one 0 === Jan, 1 === Feb, 2 === Mar
month -= 1;
// Create a new date object with the selected
// year, month, and day values and retrieve the
// milliseconds from it.
var mSeconds = (new Date(year, month, day)).getTime();
var objDate = new Date();
// Set the time of the object to the milliseconds
// retrieved from the original date. This will
// convert it to a valid date.
objDate.setTime(mSeconds);
// Compare if the date has changed, if it has then
// the date is not valid
if (objDate.getFullYear() === year &&
objDate.getMonth() === month &&
objDate.getDate() === day)
{
isValid = true;
}
return isValid;
}
}
};
抱歉,我不会说英语
您可以分别<30或31月查看日期<月12日年。。。>
我认为当您使用三个文本框时很容易:(只是 js
var compareDate, checkDates = false;
var validateObject = {
init: function(year, month, day) {
return this.compareDate.init(year, month, day);
},
compareDate: {
init: function(year, month, day) {
var isValid = false;
// Compensate for zero based index, if month was not
// subtracted from one 0 === Jan, 1 === Feb, 2 === Mar
month -= 1;
// Create a new date object with the selected
// year, month, and day values and retrieve the
// milliseconds from it.
var mSeconds = (new Date(year, month, day)).getTime();
var objDate = new Date();
// Set the time of the object to the milliseconds
// retrieved from the original date. This will
// convert it to a valid date.
objDate.setTime(mSeconds);
// Compare if the date has changed, if it has then
// the date is not valid
if (objDate.getFullYear() === year&&
objDate.getMonth() === month &&
objDate.getDate() === day)
{
if(objDate <= new Date())
{
isValid = true;
}
}
return isValid;
}
}
};
$(function() {
var validateButton = $('#btValidate');
validateButton.click(function(e) {
var month = parseInt(document.getElementById('month').value, 0),
day = parseInt(document.getElementById('day').value, 0),
year = parseInt(document.getElementById('year').value, 0),
alertBox = $('#alert'),
isValid = false;
isValid = validateObject.init(year, month, day);
var color, message;
if (isValid === true)
{
color = "#008000";
message = "Your date is valid!";
}
else if (isValid === false)
{
color = "#F00";
message = "Your date is not valid!";
}
alertBox.css('background', "" + color)
.html("<p>"+ message +"</p>")
.stop()
.animate({
width: "200px",
paddingLeft: "75px"
}, 1750, "easeOutBounce", function() {
$(this).animate({
width: "0px",
paddingLeft: "0px"
}, 1000, "easeInBounce");
});
});
});
工作代码在这里:http://jsfiddle.net/vmHjN/140/
相关文章:
- 正在验证8个真/假复选框或复选框中的2个
- 为什么grunt contrib connect的中间件选项的第三个参数是未定义的
- 如何使用PHP和JS级联三个下拉列表
- 灯光问题(使用三个.js)
- 在三个.js中创建球体(例如地球)的磁力线
- 什么'这是从第三个函数上的async 1st函数获得结果的更好方法
- javascript第三个XMLHttpRequest被拒绝.但前两个是允许的
- 将循环中的两个文本框相乘,并在第三个文本框上显示结果
- 根据前两个下拉ID显示第三个下拉列表
- 在数组JS中查找三个重复项
- JS 字段验证 - 循环遍历对象,每个字段有三个数据注意事项
- Javascript UK 使用三个输入字段进行排序代码验证
- 如何使用jquery验证器的日期月年三个文本框验证出生日期
- Javascript 验证也允许在最后第三个位置使用点
- 如何将三个单独的字段验证为一个日期
- Js提示验证为三个单词之一
- ASP.Net:三个下拉菜单和使用javascript的出生日期选择验证
- 正则表达式匹配一个点或三个点验证器
- 尝试捕获输入的校验和验证,以检查Javascript中输入的三个部分
- 我需要使用三个javascript库验证与ASP.净MVC4