2

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

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

指定的值“aaaa”不是有效数字。该值必须与以下正则表达式匹配：-?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?

我已经尝试捕获错误，但它不是 Exception。我检索输入值，错误后它为空。

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

见演示。

更多解释：

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

更新：

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

4

4 回答 4

1 
var value = "aaaa";
document.getElementById("input").value = value;
if (document.getElementById("input").value == null || document.getElementById("input").value == "") {
        alert("Invalid value");
}
于 2016-05-23T07:07:47.720 回答
0

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

（编辑：你自己在问题中提到过）

你可以做的是检查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为例

于 2016-05-20T11:48:07.307 回答
0 

    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>

于 2016-05-23T20:53:51.960 回答
0

要检查.value设置，javascript您可以设置throw为警告显示在，如果不匹配，则 显示在相同的位置。Error.messageconsolecatchinput .valueRegExpconsole

要检查用户输入 yupu 可以使用onkeydown,onpaste事件；使用<label>元素在 处显示消息html，如果为空字符串，则将onfocus事件设置为空字符串。label .innerHTMLinput .value

注意，显示的消息console也设置在input元素computedName属性；虽然不会在用户输入时更新，并alert()在catch.

<!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>

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

于 2016-05-24T07:19:48.043 回答