1

我在 jsp 表单页面中有一个字段，它接受“从日期”和“到日期”。现在我知道了可用于使用提交按钮验证这一点的脚本代码。但我的字段目前接受 10 个字符form....例如：28/07/2000 或 2807//2/00 它接受数字和任意数量的 /...

但我希望该字段接受 2 个编号，然后是 2 个编号，然后是 / 和年份。如果日期是 2000 年 1 月 1 日，那么是否可以提供页面验证...然后一旦键入 31允许的用户第二组 nos 应该是 01,03,05,07...等等...它不应该允许 02,04..etc.. 如果日期是 29/02/yyyy 那么 yyyy 应该只有闰年允许...所有这些都应该得到满足，然后只有光标应该移动到其他字段并且不刷新页面...

这可以通过ajax实现吗...由于我需要在输入2个号码后进行验证，如果有人有任何想法，如果您能指出我正确的方向，我将不胜感激...

顺便说一句，我目前使用此代码进行日期验证....

    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;
         }
           }
         }
4

2 回答 2

0

您应该查看该onkeyup事件，如果您将验证函数绑定到此事件，它将在每次释放键时运行。您可以使用onkeydown事件将当前输入值存储在变量中，然后使用onkeyup事件运行验证。如果验证无效，则只需编辑验证函数以将输入重置为按下键时存储在变量中的值。这样，一旦释放一个键，任何无效的输入都将被撤消。

目前看起来您并没有使用 jQuery（即使您已将标签添加到您的问题中）。如果你想使用它，你可以使用它的.keyup()和.keydown()方法。

除非您想使用服务器端代码进行验证并将结果异步发送回，否则您不需要任何 AJAX，但这对于这个相当简单的要求来说似乎有点过分了。

于 2013-05-09T10:40:52.987 回答
0

如果我理解正确，那么这个解决方案应该可以满足您的要求。

输入时有 3 种状态。

红色 - 绝对无效

黄色 - 部分有效

绿色 - 绝对有效

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));

在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 上

于 2013-05-09T14:53:38.463 回答