如何使表单(html、jsp)中的Textfield只接受dd/mm/yyyy格式，而无需单击提交按钮
How to make a Textfield in a form (html, jsp) accept only dd/mm/yyyy format without clicking submit button
我在jsp表单页面中有一个字段，它接受"from date"answers"to date"..现在我知道了脚本代码，可以使用提交按钮来验证这一点。但我的领域目前接受任何形式的10个字符....例如:28/07/2000或2807/2/00
但是我希望该字段接受2个no后面跟着/然后2个no后面跟着/和年份。此外，是否可以提供页面验证，如日期是31/01/2000…然后，一旦用户输入31，第二组允许的编号应该是01、03、05、07……&等等……它不应该允许02、04等等。如果日期是29/02/yyyy，那么yyyy应该只允许闰年…所有这些都应该得到满足，然后只有光标应该移动到其他字段&不刷新页面…
这可以通过ajax实现吗?因为我需要验证后2 no进入，如果有人有任何想法，如果你能给我指出正确的方向，我将不胜感激。
顺便说一下，我目前使用此代码进行日期验证....
function checkdate(frmdt,todt){
var validformat=/^'d{2}'-'d{2}'-'d{4}$/
var returnval=false
if(!validformat.test(frmdt.value)){
alert("Invalid frmdt");
document.form.frmdt.value="";
}
else if(!validformat.test(todt.value)){
alert("Invalid Date 2");
document.form.todt.value="";
}
else{
var start = document.form.frmdt.value;
var end = document.form.todt.value;
var stDate = new Date(start);
var enDate = new Date(end);
var compDate = enDate - stDate;
if(compDate >= 0)
return true;
else
{
alert("End date should be greater than start date.");
return false;
}
}
}
您应该看看onkeyup事件，如果您将验证函数绑定到该事件，它将在每次释放密钥时运行。您可以使用onkeydown事件将当前输入值存储在一个变量中，然后使用onkeyup事件运行验证。然后，如果验证无效，只需编辑验证函数，将输入重置为按下键时存储在变量中的值。这样，一旦键被释放，任何无效的输入都将被撤消。
它看起来不像你正在使用jQuery的时刻(即使你已经添加了标签到你的问题)。如果您想使用它，您可以使用它的.keyup()和.keydown()方法。
您不需要任何AJAX，除非您想使用服务器端代码进行验证并异步发送结果，但是对于这个相当简单的需求来说，这似乎有些多余。
如果我理解正确的话，那么这个解决方案应该符合您的要求。
输入过程中有三种状态
红色-绝对无效
黄色-部分有效
绿色-绝对有效
HTML<input id="date" type="text" maxlength="10" />
Javascript
/*jslint sub: true, maxerr: 50, indent: 4, browser: true */
/*global global */
(function (global) {
"use strict";
global.addEventListener("load", function onLoad() {
global.removeEventListener("load", onLoad);
document.getElementById("date").addEventListener("keyup", function (evt) {
var target = evt.target,
value = target.value,
parts = value.split("/"),
day = parseInt(parts[0], 10),
month = parseInt(parts[1], 10) - 1,
date = new Date(parseInt(parts[2], 10) || 1600, month, day),
dateCheck = day === date.getDate() && month === date.getMonth(),
finalCheck = /^(0[1-9]|[12][0-9]|3[01])'/(0[1-9]|1[012])'/(18|19|20)'d'd$/.test(value) && dateCheck;
if (/^(0[1-9]|[12][0-9]|3[01])'/{0,1}$/.test(value) || (/^(0[1-9]|[12][0-9]|3[01])'/{0,1}(0[1-9]|1[012])'/{0,1}$/.test(value) && dateCheck) || finalCheck) {
if (finalCheck) {
target.style.backgroundColor = "green";
} else {
target.style.backgroundColor = "yellow";
}
} else {
target.style.backgroundColor = "red";
}
}, false);
}, false);
}(window));
更新:解决下面评论中的其他问题
Javascript/*jslint sub: true, maxerr: 50, indent: 4, browser: true */
/*global global */
(function (global) {
"use strict";
global.addEventListener("load", function onLoad() {
global.removeEventListener("load", onLoad);
document.getElementById("date").addEventListener("keyup", function (evt) {
var target = evt.target,
value = target.value,
parts = value.split("/"),
day = parseInt(parts[0], 10),
month = parseInt(parts[1], 10) - 1,
date = new Date(parseInt(parts[2], 10) || 1600, month, day),
dateCheck = day === date.getDate() && month === date.getMonth(),
finalCheck = /^(0[1-9]|[12][0-9]|3[01])'/(0[1-9]|1[012])'/(18|19|20)'d'd$/.test(value) && dateCheck;
if (/^(0[1-9]|[12][0-9]|3[01])'/{0,1}$/.test(value) || (/^(0[1-9]|[12][0-9]|3[01])'/{0,1}(0[1-9]|1[012])'/{0,1}$/.test(value) && dateCheck) || finalCheck) {
if (finalCheck) {
target.style.backgroundColor = "green";
} else {
target.style.backgroundColor = "yellow";
}
} else {
target.style.backgroundColor = "red";
if (/^(0[1-9]|[12][0-9]|3[01])'/{0,1}(0[1-9]|1[012])'/{0,1}$/.test(value)) {
if (!dateCheck) {
alert("incorrect number of days for month");
}
}
}
}, false);
}, false);
}(window));
更新:一个事件监听器函数的例子，可以用来提供与旧的非标准Internet Explorer的兼容性
用来添加监听器
function addEvt(obj, type, fni) {
if (obj.attachEvent) {
obj['e' + type + fni] = fni;
obj[type + fni] = function () {
obj['e' + type + fni](window.event);
};
obj.attachEvent('on' + type, obj[type + fni]);
} else {
obj.addEventListener(type, fni, false);
}
}
用来删除监听器
function removeEvt(obj, type, fni) {
if (obj.detachEvent) {
obj.detachEvent('on' + type, obj[type + fni]);
obj[type + fni] = nul;
} else {
obj.removeEventListener(type, fni, false);
}
}
/*jslint sub: true, maxerr: 50, indent: 4, browser: true */
/*global global */
(function (global) {
"use strict";
function addEvt(obj, type, fni) {
if (obj.attachEvent) {
obj['e' + type + fni] = fni;
obj[type + fni] = function () {
obj['e' + type + fni](window.event);
};
obj.attachEvent('on' + type, obj[type + fni]);
} else {
obj.addEventListener(type, fni, false);
}
}
function removeEvt(obj, type, fni) {
if (obj.detachEvent) {
obj.detachEvent('on' + type, obj[type + fni]);
obj[type + fni] = nul;
} else {
obj.removeEventListener(type, fni, false);
}
}
addEvt(global, "load", function onLoad() {
removeEvt(global, "load", onLoad);
addEvt(document.getElementById("date"), "keyup", function (evt) {
var target = evt.target,
value = target.value,
parts = value.split("/"),
day = parseInt(parts[0], 10),
month = parseInt(parts[1], 10) - 1,
date = new Date(parseInt(parts[2], 10) || 1600, month, day),
dateCheck = day === date.getDate() && month === date.getMonth(),
finalCheck = /^(0[1-9]|[12][0-9]|3[01])'/(0[1-9]|1[012])'/(18|19|20)'d'd$/.test(value) && dateCheck;
if (/^(0[1-9]|[12][0-9]|3[01])'/{0,1}$/.test(value) || (/^(0[1-9]|[12][0-9]|3[01])'/{0,1}(0[1-9]|1[012])'/{0,1}$/.test(value) && dateCheck) || finalCheck) {
if (finalCheck) {
target.style.backgroundColor = "green";
} else {
target.style.backgroundColor = "yellow";
}
} else {
target.style.backgroundColor = "red";
if (/^(0[1-9]|[12][0-9]|3[01])'/{0,1}(0[1-9]|1[012])'/{0,1}$/.test(value)) {
if (!dateCheck) {
alert("incorrect number of days for month");
}
}
}
});
});
}(window));
相关文章：
- 24小时输入时间:mm格式跨浏览器
- 用javascript将日期格式从d/m/yyyy转换为yyyy-mm-dd
- 在Datepicker中将日期格式更改为yyyy-mm-dd
- 以HH:mm格式计算时差
- 如何在JavaScript中以天、dd/mm/yyyy格式显示昨天的日期
- 使用Javascript将MySQL日期格式转换为DD/MM/YY日期格式
- 我需要用age Javascript验证dd/mm/yy格式(闰年）的dob
- 如何使用moment.js将秒转换为时间格式(YYYY:MM:DD HH:MM:ss）
- 在模糊 javascript 上格式化为 hh:mm 输入
- JavaScript 将长日期格式转换为 mm/dd/yyy
- Javascript 正则表达式日期格式 dd/mm/yy
- Javascript Date 对象因格式而异:yyyy-mm-dd vs mm-dd-yyyy
- 在Javascript中用YYYY-mm-dd格式计算年龄
- 在 Angular 中将日期格式从 yyyy/MM/dd 更改为 MM/dd/yyyy
- 如何在JAVASCRIPT中使用格式HH:MM AM/PM将字符串转换为时间
- 我们可以将控制器中的JSON数据(MM/DD/YYYY格式）与今天的's日期，并在数组中显示筛选列表
- 将YYYY/MM/DD转换为有效格式
- 如何确保日期采用以下格式:MM-DD-YY，包括破折号
- 如何使用掩码编辑扩展器用日期格式 MM/yyyy 屏蔽文本框
- 输入日期格式mm/yyyy计算月份jquery
