Question

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

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

指定值＆＃34; aaaa＆＃34;不是有效的数字。该值必须与以下正则表达式匹配： - ？（\ 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.

更多解析：

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

已更新：

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

Answer 1

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

Answer 2

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

（编辑：您已在问题中自行提及）

您可以做的是检查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 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上显示的同一RegExp不匹配，则转至console。

要检查用户输入，yupu可以使用onkeydown，onpaste个事件;使用<label>元素在html，onfocus事件中显示消息，以便在label .innerHTML为input .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> {{1}}处{{1}}后设置为空字符串。

{{1}}

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

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

4 个答案: