如何使表单中的一个文本字段（HTML，JSP）只接受DD / MM / YYYY格式，无需点击提交按钮字段、表单、按钮、文本
2023-09-10 14:06:55
作者：不爱就滚开
我在接受起始日期和最新一个jsp页面表单字段.. 现在我知道剧本code，可用于该使用一个提交按钮来验证.. 但我场目前接受任何形式的10个字符....例如：28/07/2000或2807 // 2/00 它接受数字和任何数量/...
但我想现场接受2号接着/然后2号后跟/与去年.. 也就是它可以提供的onpage验证一样，如果日期是31/01/2000 ......那么一旦31由第二设置允许应该是01,03,05,07 ......与功放号的用户输入;不久... 它不应该允许02,04..etc .. 如果日期是29/02 / YYYY然后YYYY应该只闰年允许... 所有这一切都应该是满意的则只有光标应该转移到其他领域和放大器;而无需刷新页面...
可以这样用AJAX实现... 因为我需要验证的2号输入后， 如果任何人有任何想法，我将AP preciate如果你可以点我在正确的方向...
通过我目前使用这个code日期验证的方式......
函数了checkdate（frmdt，托德）{
VAR validformat = / ^ \ d {2} \ - \ D {2} \ - \ D {4} $ /
VAR returnval = FALSE
如果（！validformat.test（frmdt.value））{
警报（无效frmdt）;
document.form.frmdt.value =;
}
否则，如果（！validformat.test（todt.value））{
警报（无效日期2）;
document.form.todt.value =;
}
其他{
VAR开始= document.form.frmdt.value;
VAR结束= document.form.todt.value;
VAR stDate =新的日期（开始）;
VAR enDate =新的日期（结束）;
VAR compDate = enDate - stDate;
如果（compDate＆GT; = 0）
返回true;
其他
{
警报（结束日期应该大于开始日期。）;
返回false;
}
}
}
解决方案
如果我理解正确的，那么这个解决方案应该做你问。
有输入过程中3种状态。
红色 - 肯定是无效的。
黄色 - 部分有效
绿 - 绝对有效。
HTML
＆LT;输入ID =日期类型=文本最大长度=10/＆GT;
使用Javascript
/ *的JSLint子：真，MAXERR：50，缩进：4，浏览器：真* /
/ *全球全球* /
（函数（全局）{
使用严格;
global.addEventListener（负荷，函数的onLoad（）{
global.removeEventListener（加载，的onLoad）;
的document.getElementById（日）。的addEventListener（KEYUP功能（EVT）{
VAR的目标= evt.target，
值= target.value，
部分= value.split（/），
天= parseInt函数（份[0]，10），
一个月= parseInt函数（，部分[1] 10） - 1，
日期=新的日期（parseInt函数（部分[2]，10）|| 1600年，月，日），
dateCheck =天=== date.getDate（）＆安培;＆安培;月=== date.getMonth（），
finalCheck = / ^（0 [1-9] | [12] [0-9] | 3 [01]）\ /（0 [1-9] | 1 [012]）\ /（18 | 19 | 20） 。\ D \ D $ /测试（值）及和放大器; dateCheck;
如果（/^(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} $ /测试（价值）及＆安培; dateCheck）|| finalCheck）{
如果（finalCheck）{
target.style.backgroundColor =绿色;
} 其他 {
target.style.backgroundColor =黄色;
}
} 其他 {
target.style.backgroundColor =红色;
}
}， 假）;
}， 假）;
}（窗口））;
在的jsfiddle
更新：为解决更多的问题，在下面的意见
Javascript的
/ *的JSLint子：真，MAXERR：50，缩进：4，浏览器：真* /
/ *全球全球* /
（函数（全局）{
使用严格;
global.addEventListener（负荷，函数的onLoad（）{
global.removeEventListener（加载，的onLoad）;
的document.getElementById（日）。的addEventListener（KEYUP功能（EVT）{
VAR的目标= evt.target，
值= target.value，
部分= value.split（/），
天= parseInt函数（份[0]，10），
一个月= parseInt函数（，部分[1] 10） - 1，
日期=新的日期（parseInt函数（部分[2]，10）|| 1600年，月，日），
dateCheck =天=== date.getDate（）＆安培;＆安培;月=== date.getMonth（），
finalCheck = / ^（0 [1-9] | [12] [0-9] | 3 [01]）\ /（0 [1-9] | 1 [012]）\ /（18 | 19 | 20） 。\ D \ D $ /测试（值）及和放大器; dateCheck;
如果（/^(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} $ /测试（价值）及＆安培; dateCheck）|| finalCheck）{
如果（finalCheck）{
target.style.backgroundColor =绿色;
} 其他 {
target.style.backgroundColor =黄色;
}
} 其他 {
target.style.backgroundColor =红色;
如果（/ ^（0 [1-9] | [12] [0-9] | 3 [01]）\ / {0,1}（0 [1-9] | 1 [012]）\ / {0 ，1} $ /测试（值））{
如果（！dateCheck）{
警报（不正确数月的天）;
}
}
}
}， 假）;
}， 假）;
}（窗口））;
在的jsfiddle
更新：和实施例的，可用于给兼容性与旧非标准的Internet Explorer事件侦听功能
使用这种添加监听器
函数addEvt（OBJ，类型，FNI）{
如果（obj.attachEvent）{
OBJ ['E'+类型+ FNI] = FNI;
OBJ [类型+ FNI] =功能（）{
OBJ ['E'+类型+民族阵线（window.event）;
};
obj.attachEvent（'上'+型，OBJ [类型+ FNI]）;
} 其他 {
obj.addEventListener（类型，民族阵线，假）;
}
}
使用这种去除听众
函数removeEvt（OBJ，类型，FNI）{
如果（obj.detachEvent）{
obj.detachEvent（'上'+型，OBJ [类型+ FNI]）;
OBJ [类型+ FNI] = NUL;
} 其他 {
obj.removeEventListener（类型，民族阵线，假）;
}
}
在使用
/ *的JSLint子：真，MAXERR：50，缩进：4，浏览器：真* /
/ *全球全球* /
（函数（全局）{
使用严格;
功能addEvt（OBJ，类型，FNI）{
如果（obj.attachEvent）{
OBJ ['E'+类型+ FNI] = FNI;
OBJ [类型+ FNI] =功能（）{
OBJ ['E'+类型+民族阵线（window.event）;
};
obj.attachEvent（'上'+型，OBJ [类型+ FNI]）;
} 其他 {
obj.addEventListener（类型，民族阵线，假）;
}
}
功能removeEvt（OBJ，类型，FNI）{
如果（obj.detachEvent）{
obj.detachEvent（'上'+型，OBJ [类型+ FNI]）;
OBJ [类型+ FNI] = NUL;
} 其他 {
obj.removeEventListener（类型，民族阵线，假）;
}
}
addEvt（全局，加载功能的onLoad（）{
removeEvt（全局，负荷，的onLoad）;
addEvt（的document.getElementById（日），KEYUP功能（EVT）{
VAR的目标= evt.target，
值= target.value，
部分= value.split（/），
天= parseInt函数（份[0]，10），
一个月= parseInt函数（，部分[1] 10） - 1，
日期=新的日期（parseInt函数（部分[2]，10）|| 1600年，月，日），
dateCheck =天=== date.getDate（）＆安培;＆安培;月=== date.getMonth（），
finalCheck = / ^（0 [1-9] | [12] [0-9] | 3 [01]）\ /（0 [1-9] | 1 [012]）\ /（18 | 19 | 20） 。\ D \ D $ /测试（值）及和放大器; dateCheck;
如果（/^(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} $ /测试（价值）及＆安培; dateCheck）|| finalCheck）{
如果（finalCheck）{
target.style.backgroundColor =绿色;
} 其他 {
target.style.backgroundColor =黄色;
}
} 其他 {
target.style.backgroundColor =红色;
如果（/ ^（0 [1-9] | [12] [0-9] | 3 [01]）\ / {0,1}（0 [1-9] | 1 [012]）\ / {0 ，1} $ /测试（值））{
如果（！dateCheck）{
警报（不正确数月的天）;
}
}
}
}）;
}）;
}（窗口））;
在的jsfiddle
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 /...
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...
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...
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;
}
}
}
解决方案
If I have understood correctly, then this solution should do what you have asked.
There are 3 states during input.
Red - definitely invalid
Yellow - partially valid
Green - definitely valid
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));
On jsfiddle
Update: to address the additional question in the comments below
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));
on jsfiddle
Update: and example of event listener functions that can be used to give compatability with older non-standard 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));
On jsfiddle
相关推荐
猜您喜欢
精彩图集
