javascript - javascript 中仅允许正则表达式模式

Question

我希望用户输入一个格式为的数字:

##/####

其中“#”是数字。

这里是示例代码:

(function() {
  var previousValue = document.getElementById('myInput').value;
  var pattern = /^\d{2}(\/\d{4})?$/;

  function validateInput(event) {
    event = event || window.event;
    var newValue = event.target.value || '';

    if (newValue.match(pattern)) {
      // Valid input; update previousValue:
      previousValue = newValue;
    } else {
      // Invalid input; reset field value:
      event.target.value = previousValue;
    }
  }

  document.getElementById('myInput').onkeyup = validateInput;
}());

<input id="myInput" type="text" maxlength=7 value="" />

我只能写前两个数字，但之后我无法输入任何其他数字，即使正则表达式对我来说似乎是正确的。

---编辑---

在所有答案之后，我想指出我已经有一个在提交时触发的验证器，它告诉用户他们是否输入了正确的表单；我只是想以某种方式“引导”用户输入内容。

Answer 1

当用户键入时使用此 var pattern =/^\d{0,2}(\/\d{0,4})?$/; 这基本上允许键入模式你要。当输入变得模糊时，检查输入字段的length并进行相应验证。(或者您可以使用minlength(使其等于maxlength)，如果您在表单中使用输入字段，那么您将不需要 blur 方法)

(function() {
    var previousValue = document.getElementById('myInput').value;
    var pattern = /^\d{0,2}(\/\d{0,4})?$/;

    function validateInput(event) {
        len = event.target.value.length;
        event = event || window.event;
        var newValue = event.target.value || '';

        if (newValue.match(pattern)) {
            // Valid input; update previousValue:
            previousValue = newValue;
        } else {
            // Invalid input; reset field value:
            event.target.value = previousValue;
        }
    }

    document.getElementById('myInput').onkeyup = validateInput;
}());


(function() {
    function validateInput(event) {
        len = event.target.value.length;

        (len===7) ? console.log("Success") : console.log("fail");
    }
    document.getElementById('myInput').onblur = validateInput;
}());

<input id="myInput" type="text" milength=7 maxlength=7 value="" />
<button>1</button>