如何验证输入日期html年份？答案

【问题标题】：How to validate input date html year?如何验证输入日期html年份？
【发布时间】：2017-08-04 23:16:25
【问题描述】：

一旦年份有 4 位数字，我希望日期输入停止输入。我尝试使用 HTML 中的 min 和 max 组件，但它仍然允许您键入擦除第一个数字。请参见示例 1。

请参阅示例 2，了解可以输入 4 位以上的年份。

这是我的两个测试运行，我还尝试使用 HTML 中的“onchange”组件创建一个带有 JS 的方法，但我尝试过，但这似乎都不起作用......

https://fiddle.jshell.net/jaelsvd/98xww3qg/9/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Example 1</label>
 <input id="date1" type="date" min="1990-12-31" max="2050-12-30">
  <br />
   <label>Example 2</label>
  <input id="date2" type="date" />

【问题讨论】：

使用onkeypress JavaScript 事件重试。当您在输入中键入时，onchange 事件不会触发。
@GramThanos——如果输入不会导致按键事件被调度（比如使用鼠标粘贴），该怎么办？
可能是How to validate a year I enter in textbox using jquery rule?的副本
@RobG 是的，这也是个问题。所以...有人可以使用所有事件：P
onkeypress 的问题在于它没有正确检测到我年份的值。可能是因为它甚至在检测到日期的实际值之前就触发了该方法。 :P 我希望它像 maxlenght=8 一样简单，哈哈

标签： javascript jquery html validation date

【解决方案1】：

设置maxlength 并使用pattern 和required，如果您希望html5 内置验证：

<form>
  <label for ="date2">Example 2</label>
  <input id="date2" type="date" pattern="\d{4}" maxlength="4"  required />
  <button>
    Submit
  </button>
</form>

【讨论】：

【解决方案2】：

为了更灵活，您可以使用文本框输入并检查按键事件，并决定接受或拒绝按下的按键，如下所示：

<input type="text" id="my_date" placeholder="MM/dd/YYYY" />

<script>
    var myDate = document.querySelector('#my_date');
    myDate.onkeypress = function (evt) {
        var _evt = evt || windows.event;
        var keyCode = _evt.keyCode || _evt.charCode;
        var sKey = String.fromCharCode(keyCode);
        // TODO: test for key value

        // Test for text lenth
        var text = this.value;
        // TODO: test value, return true to accept, false to reject.
        if (text.length > 10) {
            alert(text + ' length reach quota.');
            return false;
        }
        else {
            return true;
        }
    };
</script>

【讨论】：

不使用键盘输入的值会怎样（即不会导致键盘事件被调度）？
我想我会使用这样的东西，但我会使用禁用的 onpresskey 而不是警报。 “假”
@RobG：处理复制和粘贴，可能是为了捕捉“onchange”并检查值并拒绝整个文本。
@JaelSaavedra，如果有帮助，请接受答案。
@KhoaBui 它不起作用，我尝试将输入类型更改为 date 并尝试删除最后一个 0（额外字符），如果我尝试条件 text.length > 9 它没有也不行，这是一个例子，我仍然需要删除多余的数字。 jsfiddle.net/jaelsvd/8p35t1ep/1

【解决方案3】：

对于您的情况，可以使用： (1) FormValidation (this link), (2) DateRangePicker - Jquery (this link)

【讨论】：

这不是答案，可能是评论。

【解决方案4】：

问题是组件“日期”在按键时设置为 000。我必须更改条件并阅读 000 之前然后设置条件。这行得通。

var myDate = document.querySelector('#my_date');
    myDate.onkeypress = function (evt) {
        var _evt = evt || windows.event;
        var keyCode = _evt.keyCode || _evt.charCode;
        var sKey = String.fromCharCode(keyCode);
        
        var text = this.value;
         var res = text.substring(0, 3);
         var res2 = text.substring(0,2);
         var res3  = text.substring(0,1);
         if(res === "000" || res2 === "00" || res3 ==="0"){
             return true;
         }else{
            if (text.length >= 9) {
                return false;
            }
            else {
                return true;
            }
         }
        
    };

&lt;input type="date" id="my_date" placeholder="MM/dd/YYYY" /&gt;

【讨论】：