在 javascript 中设置时捕获 HTML5 错误输入验证（显示警告）或检查之前的验证

Question

我正在尝试验证要在输入中设置的数据。我想使用 de Validation HTML5.

例如，我想检查 "aaaa" 是否是 数字输入 的有效数据。我想使用 willValidate 或 validity 但我无法设置无效值，控制台显示 (Chrome):

The specified value "aaaa" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?

我已经尝试捕获错误但它不是异常。我取回输入值，报错后为空

var value = "aaaa";

try {
    document.getElementById("input").value = value; // Shows a warn
} catch(err) {
    console.log(err.message); // Nothing catching
}

console.log( document.getElementById("input").value ); // It is empty

See DEMO.

更多解释：

我想检查要设置的值在输入类型中是否有效。我想在输入中设置无效值并检查 willValidate 或有效性，但浏览器显示警告并且输入值为空。问题是我的前端通过 javascript 设置了输入值，但用户传递了这些值。当发生错误时，我需要向用户显示错误，而不是只输入空的..

已更新:

我知道警告不是异常。我想知道在任何类型中设置无效输入值时显示错误。

Answer 1

因为这不是错误，只是警告。您可以在控制台中查看。

(编辑: 你自己在问题中提到了)

您可以做的是检查 isNaN(value) 并抛出一个错误对象。

try {
 if(isNaN(value)) 
    throw new Error("not a number");
 else
    document.getElementById("input").value = value;
} catch(err) {
    document.getElementById("error").innerText = err.message;
}

jsFiddle 例如

Answer 2

var value = "aaaa";
document.getElementById("input").value = value;
if (document.getElementById("input").value == null || document.getElementById("input").value == "") {
        alert("Invalid value");
}

Answer 3

    function chkValidity(elemementID) {
        var inpObj = document.getElementById(elemementID);
        if (inpObj.checkValidity() == false) {
            inpObj.setCustomValidity("This is not a number or a valid number. And this is my custom validity message for the value "+inpObj.value+" which is being inserted via javascript. Determinig \"required\",\"min\",\"max\" and checkValidity it is enough to do the work.");
          document.getElementById("error").innerHTML = inpObj.validationMessage;
          alert(inpObj.validationMessage);
        } else {
        document.getElementById("error").innerHTML = "This is valid number and within range";
        }
    }
    var value = "aaaa";
    document.getElementById("input").value = value;
    chkValidity("input");
    document.querySelector("#clickme").addEventListener("click", function(){
        chkValidity("input");
    });

    <input type="number" id="input" required min="0" max="9999" step="1" />
    <button id="clickme"> Click Me
    </button>
    <div id="error">
    </div>

Answer 4

要检查 .value 是否由 javascript 设置，您可以 throw 一个 Error ，将 .message 设置为警告显示在 console，到 catch 如果 input .value 与 console 处显示的相同 RegExp 不匹配。

yupu可以使用onkeydown、onpaste事件来检查用户输入；使用 <label> 元素在 html 处显示消息，如果 input .value 为空字符串。

注意，在console处显示的消息也在input元素computedName属性处设置；虽然未在用户输入时更新并设置为 catch 处 alert() 之后的空字符串。

<!DOCTYPE html>
<html>
<head>
  <script>
    window.onload = function() {
      
      var input = document.getElementById("input");
      var label = document.querySelector("[for=input]");

      function handleInvalid(el, val, e) {
        console.log("value:", val, "computedName:", el.comptedName);
        var message = "The specified value <mark>" + val 
                      + "</mark> is not a valid number. "
                      + "The value must match to "
                      + "the following regular expression: "
                      + "<code style=background:#eee;padding:2px>"                          
                      + "-?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)?</code>";
        // if `e` : `event` is not defined,
        // that is `val` : `"aaaa"` set at `try`;
        // not user input
        if (!e) {
          el.value = val;
          
        };

        if (!/-?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)?/.test(val)) {
          if (!e) {
            // `throw` `Error` to `catch`
            throw new Error(message);
          } else {
            label.innerHTML = message;
          }
        } else {
          // if `val` is matches `RegExp`, 
          // set `label` `.innerHTML` to empty string            
          label.innerHTML = ""
        }
      }

      function handleInput(e) { 
        label.innerHTML = "";
        var text = e.clipboardData // handle `paste` event
                   ? e.clipboardData.getData("text/plain") 
                     // use `event.key` of `keydown` event
                     // if defined, else use `e.keyCode`
                   : e.key || String.fromCodePoint(e.keyCode);
        handleInvalid(this, text, e);
      }
      
      function reset() {
        // set `label` `.innerHTML` to empty string
        if (input.value.trim() === "") {
          label.innerHTML = "";
        }
      }

      input.onkeydown = input.onpaste = handleInput;
      input.onfocus = reset;

      try {
        var val = "aaaa";
        handleInvalid(input, val)
      } catch (e) {
        label.innerHTML = e.message;
        alert(input.computedName);
      }
      
    }
  </script>
  <style>
  </style>
</head>
<body>
  <form>
    <input type="number" id="input" />
    <label id="error" for="input"></label>
  </form>
</body>
</html>

plnkrhttp://plnkr.co/edit/mLgCQfBmvZHb5cNGZWtN?p=preview

在 javascript 中设置时捕获 HTML5 错误输入验证（显示警告）或检查之前的验证

Capture HTML5 error input validation when set in javascript (shows a warn) or check validation before

html

javascript

html5-validation