仅允许javascript

Question

我希望用户输入格式为的数字：

##/####

＆＃34;＃＆＃34;是数字。

以下是示例代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

--- --- EDIT

在所有答案之后，我想指出我已经有一个验证器，它会触发提交，告诉用户他们是否输入了正确的格式;我只想以某种方式＆＃34;指导＆＃34;用户输入输入。

Answer 1

可能你想让正则表达式在用户还没有完成写下时验证是否正确。

var pattern = /^\d{0,2}(\/\d{0,4})?$/;

但在此之后您仍需要验证它，因此onblur检查可能会更好。

Answer 2

在用户输入时使用此var pattern = /^\d{0,2}(\/\d{0,4})?$/;，基本上允许输入所需的模式。当输入变为blur时，检查输入字段的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>

Answer 3

首先，您可以分析正则表达式here。

你会发现你的正则表达式：

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

匹配以两位数开头的字符串，后跟斜线，然后是4位重复零次或一次（问号）。

只需删除问号以匹配确切的模式。

Answer 4

对我来说，你的验证方法似乎错了！您必须等待用户从输入字段中模糊进行验证。

我建议使用事件onblur代替onkeyup来执行验证。如何验证未完成的输入？

否则，您可以对事件onkeypress进行编程，以检查被击中的键是否是您需要的键。您将不得不处理关键代码和所有。

修改

管理解决问题！检查以下内容是否有帮助。

(function() {
    var previousValue = document.getElementById('myInput').value;
    function validateInput(event) {
        event = event || window.event;
        var newValue = event.target.value || '';
        var previousValueLength = document.getElementById('myInput').value.length;
        var pattern = /^\d{2}\/\d{4}$/;
        switch(previousValueLength){
            case 0:
                pattern = /^$/;
                break;
            case 1:
                pattern = /^\d{1}$/;
                break;
            case 2:
                pattern = /^\d{2}$/;
                break;
            case 3:
                pattern = /^\d{2}\/$/;
                break;
            case 4:
                pattern = /^\d{2}\/\d{1}$/;
                break;
            case 5:
                pattern = /^\d{2}\/\d{2}$/;
                break;
            case 6:
                pattern = /^\d{2}\/\d{3}$/;
                break;
        }
        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;
}());

https://jsfiddle.net/zjg6azjn/9/

Answer 5

从我的观点来看，你遇到的问题是你的问题。任何密钥后Onkeyup都会被解雇。如果输入字段的当前值与您的模式不匹配，则将其替换为旧的值。我认为您需要处理change事件而不是keyup：codepen