在JavaScript中设置时捕获HTML错误输入验证(显示警告)或在之前检查验证

gkl3eglg 于 2023-01-28 发布在 Java

关注(0)|答案(4)|浏览(135)

我正在尝试验证要在输入中设置的数据。我想使用HTML验证。
例如，我想检查"aaaa"是否是数字输入的有效数据。我想使用willValidate或validity，但我无法设置无效值，控制台显示（Chrome）：
指定的值"aaaa"不是有效数字。该值必须与以下正则表达式匹配：- ？（\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

- 一个

我想检查输入类型中要设置的值是否有效。我想在输入中设置无效值，然后检查willValidate或validity，但浏览器显示警告，输入值为空。问题是我的前端通过JavaScript设置输入值，但用户传递值。当错误发生时，我需要向用户显示错误，而不是仅放置和输入为空。
我知道警告不是异常。我想知道在任何类型中设置无效输入值时显示错误。

Html

来源：https://stackoverflow.com/questions/37345442/capture-html-error-input-validation-when-set-in-javascript-shows-a-warn-or-che

4条答案

按热度按时间

xggvc2p61#

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

赞(0）回复(0）举报 2023-01-28

ukqbszuj2#

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>

赞(0）回复(0）举报 2023-01-28

wecizke33#

要检查JavaScript设置的值，您可以抛出一个Error，将.message设置为控制台中显示的警告，以捕获输入值是否与控制台中显示的相同正则表达式不匹配。
要检查用户输入，可以使用onkeydown和onpaste事件;使用<label>元素在HTML中显示消息，如果输入值为空字符串，则使用onfocus事件将标签的.innerHTML设置为空字符串。
注意，控制台中显示的消息也是在input元素的computedName属性中设置的;但在用户输入时不更新，并在捕获时设置为跟随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>

下面是一个Plnkr的例子：https://plnkr.co/edit/mLgCQfBmvZHb5cNGZWtN?p=preview

赞(0）回复(0）举报 2023-01-28

ohtdti5x4#

因为那不是错误，只是警告，你可以在控制台检查。
您可以做的是检查isNaN(value)并抛出一个Error对象。

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为例

赞(0）回复(0）举报 2023-01-28

我来回答

在JavaScript中设置时捕获HTML错误输入验证(显示警告)或在之前检查验证

4条答案

相关问题

热门标签

最新问答