如何在表单（html，jsp）中创建文本字段只接受dd / mm / yyyy格式而不单击提交按钮
我在jsp表单页面中有一个字段，它接受“从日期”和“到日期”..现在我知道可以使用提交按钮validation这个的脚本代码..但我的字段目前接受任何10个字符form ….例如：28/07/2000或2807 // 2/00它接受数字和任意数量的/ …
但我希望该字段接受2个后跟/然后2个后跟/和年份..也可以提供onpagevalidation，如果日期是31/01/2000 …然后一旦31键入由用户第二组允许的nos应该是01,03,05,07 …依此类推……它不应该允许02,04..etc ..如果日期是29/02 / yyyy那么yyyy应该只是闰年允许…所有这一切都应该得到满足然后只有光标应该移动到其他字段并且不刷新页面…
这可以通过ajax来实现……因为我需要在输入2个之后进行validation，如果有人有任何想法我会很感激，如果你能指出我正确的方向……
顺便说一句，我目前使用此代码进行日期validation….
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事件，如果你将validation函数绑定到这个事件，它将在每次释放一个键时运行。 您可以使用onkeydown事件将当前输入值存储在变量中，然后使用onkeyup事件来运行validation。 然后，如果validation无效，则只需编辑validationfunction，将输入重置为按下键时存储在变量中的值。 这样，一旦释放密钥，任何无效的输入都将被撤消。
看起来你现在看起来并不是在使用jQuery（即使你已经在你的问题中添加了标签）。 如果你想使用它，你可以使用它的.keyup()和.keydown()方法。
除非你想使用服务器端代码进行validation并以异步方式发回结果，否则你不需要任何AJAX，但这对于这个相当简单的要求来说似乎有些过分。
如果我理解正确，那么这个解决方案应该按照你的要求做。
输入期间有3种状态。
红色 – 绝对无效
黄色 – 部分有效
绿色 – 绝对有效
HTML
使用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));
在jsfiddle
更新：在下面的评论中解决其他问题
使用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));
在jsfiddle
更新：和事件侦听器函数的示例，可用于提供与旧的非标准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));
在jsfiddle