Javascript 如何使表单（html、jsp）中的文本字段只接受dd/mm/yyyy格式，而不单击提交按钮

我在jsp表单页面中有一个字段，它接受“from date”和“to date”。。 现在我知道了可以使用submit按钮来验证的脚本代码。。 但我的字段目前接受10个字符的任何形式…例如：28/07/2000或2807//2/00 它接受数字和任意数量的/

但我希望字段接受2个，然后是/然后是2个，然后是/和年份。。 此外，是否可以提供页上验证，如日期为2000年1月31日…则一旦用户键入31，第二组允许的编号应为01、03、05、07…等等。。。 它不应允许02,04…等。。 如果日期为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;
         }
           }
         }

---

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

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

---

除非您希望使用服务器端代码进行验证并异步返回结果，否则您不需要任何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";
                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);
    }
}

使用此选项删除侦听器

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

---

>如果HTML5被完全支持，那么你可以使用EDE，在Chrome中工作，而不是FiFox，所以目前不是一个解决方案，认为值得一提的是，我的大多数用户使用IE7或8，所以它也必须对它们进行工作……也许我建议你考虑DropDrand，第一个有一天，下一个下拉列表是月份，您可以根据第一个月份控制列表中的内容，然后根据另一个年份控制列表中的内容，这一点同样可以控制。我尝试过，但有些页面有20个关于日期的字段，因此会阻碍用户每次滚动并选择日期…我需要允许他们手动输入日期。。下拉菜单不起作用，您可以使用第三方库，如jquery UI datepicker：感谢您的快速响应。。。我是一个新手，这是我工作的第一个任务，我正在努力。。。如果你能举例说明如何使用它，那将是非常有帮助的……在工作中学习：）我总是发现，自己寻找和尝试东西教会了我最多的东西。但是执行类似于

的操作，然后实现一个saveCurrentValue函数，该函数将值粘贴到一个临时全局变量中，以及一个validate函数，该函数根据传递给它的元素的值的长度来运行验证（

this.value

）。例如：如果值的长度为3，则运行验证，仅当值的前两个字符为数字且最后一个字符等于斜杠时，验证才会返回true。然后，如果验证返回false，则将输入值设置回其原始值，该值应位于全局变量中。

/^\d{2}-\d{2}-\d{4}$/

JavaScript中的这一位是验证完整日期的值。您只需要正则表达式的一部分。例如，在输入值上运行类似的操作：

/^\d{2}-\$/

，因为当输入值的长度为3时，将验证该值是否由2个十进制数（\d{2}）和一个

-

（\-）或一个\（\）组成。我会把剩下的留给你去弄清楚。谢谢它的工作…但当我试图把警告框而不是颜色…它会给每个输入的号码错误弹出。。。当输入的月份与输入的天数不匹配时，我该如何弹出窗口？输入的天数将显示在“红色”框中，因此添加一条带有您希望匹配/检查的条件的if语句，如果匹配，则弹出您的警报。但这不是原始问题的一部分。感谢它在chrome和firefox上工作，但在ie8上不工作…ie8给出了一个错误，表示该对象不受支持…我需要它在ie上工作。我尝试启用脚本，但不起作用……这是因为IE8使用attachEvent而不是standards addEventListener，使用DeAttachEvent而不是standards removeEventListener。因此，您需要用一个同时适用于这两者的函数来替换事件侦听器。如果您需要支持IE8和IE7，那么您需要习惯IE8和IE7的怪癖，因为您会发现这样的差异很多。