[英]How to make a Textfield in a form (html, jsp) accept only dd/mm/yyyy format without clicking submit button
I have a field in a jsp form page which accepts "from date" and "to date".. Now I know the script code which can be used to validate this using a submit button.. But my field currently accepts 10 characters in any form....eg: 28/07/2000 or 2807//2/00 It accepts numbers and any number of /... 我在jsp表单页面中有一个字段,该字段可以接受“起始日期”和“截止日期”。.现在,我知道可以使用提交按钮验证此脚本的脚本代码。但是,我的字段目前可以接受10个字符形式....例如:28/07/2000或2807 // 2/00它接受数字和任何数量的/ ...
But I want the field to accept 2 nos followed by / then 2 nos followed by / and the year.. Also is it possible to provide onpage validation like if date is 31/01/2000...then once 31 is typed by the user second set of nos allowed should be 01,03,05,07...& so on... It should not allow 02,04..etc.. If date is 29/02/yyyy then yyyy should only leap years allowed... All this should be satisfied then only the cursor should move to other field & without refreshing the page... 但是我希望该字段接受2个数字,然后是/,然后是2个数字,然后是/和年份。.也可以提供页面验证,例如日期是31/01/2000 ...则一旦输入31,用户允许的第二组数字应该是01,03,05,07 ...等等...不应该允许02,04..etc ..如果日期是29/02 / yyyy,则yyyy应该只leap年允许...所有这些都应满足,然后仅光标应移至其他字段且无需刷新页面...
Can this be achieved by ajax... Since I need validation after 2 nos are entered, If anyone has any idea I would appreciate if you could point me in the right direction... 可以通过ajax实现吗...由于我需要输入2个数字后进行验证,如果有人有任何想法,如果您能指出正确的方向,我将不胜感激...
By the way I currently use this code for date 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;
}
}
}
You should have a look at the onkeyup
event, if you bind your validation function to this event it will run every time a key is released. 您应该看一下
onkeyup
事件,如果将验证功能绑定到此事件,它将在每次释放键时运行。 You could use the onkeydown
event to store the current input value in a variable, and then the onkeyup
event to run the validation. 您可以使用
onkeydown
事件将当前输入值存储在变量中,然后使用onkeyup
事件运行验证。 Then just edit the validation function to reset the input to the value stored in the variable when the key was pressed, if the validation is invalid. 然后,如果验证无效,则只需编辑验证功能即可将输入重置为按下键时存储在变量中的值。 This way, as soon as a key is released, any invalid input would be undone.
这样,一旦释放键,任何无效的输入都将被撤消。
It doesn't look like you are using jQuery at the moment (even though you have added the tag to your question). 您目前似乎并没有使用jQuery(即使您已将标签添加到问题中)。 In case you want to use it you could use its
.keyup()
and .keydown()
methods instead. 如果要使用它,可以改用它的
.keyup()
和.keydown()
方法。
You won't need any AJAX for this unless you want to do the validation using server side code and send the result back asynchronously, but that seems overkill for this fairly simple requirement. 除非您要使用服务器端代码进行验证并将结果异步发送回去,否则您将不需要任何AJAX,但这对于这个相当简单的要求似乎有点过头了。
If I have understood correctly, then this solution should do what you have asked. 如果我正确理解,那么此解决方案应该可以完成您所要求的。
There are 3 states during input. 输入期间有3种状态。
Red - definitely invalid 红色-绝对无效
Yellow - partially valid 黄色-部分有效
Green - definitely valid 绿色-绝对有效
HTML 的HTML
<input id="date" type="text" maxlength="10" />
Javascript Java脚本
/*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));
Update: to address the additional question in the comments below 更新:在下面的评论中解决其他问题
Javascript Java脚本
/*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));
Update: and example of event listener functions that can be used to give compatability with older non-standard Internet Explorer 更新:以及事件侦听器功能的示例,可用于提供与较早的非标准Internet Explorer的兼容性
Use this for adding listeners 使用它来添加侦听器
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);
}
}
Use this for removing listeners 使用它删除监听器
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);
}
}
In use 正在使用
/*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));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.