检测输入字段中的错误消息

Question

如果用户键入受限符号，我如何显示消息？

例如，如果用户在输入字段中键入 *，则错误消息会显示 A filename cannot contain any of the following characters: \/:*?"<>|。我希望有人可以指导我如何去做。谢谢

<!DOCTYPE html>
<html>
<body>

<h1>How to show error message</h1>


<input type="text" class="form-control blank" id="function_code" name="function_code" title="function_code" onpaste="return false">

</body>
</html>

<script>
document.getElementById("function_code").onkeypress = function(e) {
var chr = String.fromCharCode(e.which);
if ("></\":*?|".indexOf(chr) >= 0)
return false;
};
</script>

如果用户在输入字段中键入限制符号，我的预期结果如下图所示：

Answer 1

使用 HTML5 模式匹配，下面我使用了模式 ([a-zA-Z0-9]+)，它仅表示字符只有拉丁字母和数字 0-9。您可以包含 space 字符 ([a-zA-Z0-9]+\s{1}[a-zA-Z0-9]+)

您可以了解有关正则表达式的更多信息here

这不会阻止作者输入错误的按键，它只会验证输入。我将包括另一种方法来显示自定义错误。

<form >
<input type="text" class="form-control blank" id="function_code" name="Option an" title="A name cannot contain irregular characters" pattern='([a-zA-Z0-9]+)' onpaste="return false">
<button >Submit</button>
</form>

第二种方法。使用 Javascript 并将错误写入 div 标记。

<!DOCTYPE html>
<html>
<body>

<h1>How to show error message</h1>


<input type="text" class="form-control blank" id="function_code" name="function_code" title="function_code" onpaste="return false">
<div id="error-box"></div>

</body>
</html>

<script>

function showError (key) {
  var errBox = document.querySelector("#error-box");
  errBox.textContent = "The character " + key.toString() + " is not allowed!";
  //Dismiss the error
  window.setTimeout(function () {
      errBox.textContent = "";
  }, 10000)
}


document.getElementById("function_code").onkeypress = function(e) {
var chr = String.fromCharCode(e.which);

if ("></\":*?|".indexOf(chr) >= 0)
  showError(chr)
  return false;
};
</script>

Answer 2

首先，我会将输入包装在一个表单中。之后，如果条件为真，您可以对输入字段使用 setCustomValidity 函数来设置自定义消息。当您按下回车键或提交表单时，您将看到错误消息。这样您就可以为您的输入提供任何自定义消息。注意 else 块以处理无错误情况。

参考：https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity

<!DOCTYPE html>
<html>

<body>

<h1>How to show error message</h1>

<form>
    <input type="text" class="form-control blank" id="function_code" name="function_code" title="function_code" onpaste="return false">
    <button type="submit">Submit</button>
</form>

<script>
    document.getElementById("function_code").onkeypress = function(e) {
        var chr = String.fromCharCode(e.which);
        if ("></\":*?|".indexOf(chr) >= 0) {
          this.setCustomValidity('A filename cannot contain any of the following characters: \/:*?"<>|');
        } else {
          this.setCustomValidity('');
        }
    };
</script>

</body>

</html>

Answer 3

使用 input 事件和正则表达式，如下所示：

const input = document.getElementById("function_code");
const error = document.getElementById('error');
const regex = /[\\/:*?"<>|]+/;

input.addEventListener('input', (e) => {
  const value = e.target.value;

  if (regex.test(value)) {
    input.value = value.slice(0, value.length - 1);
    error.textContent = 'A filename cannot contain any of the following characters: \/:*?"<>|';
  } else {
    error.textContent = '';
  }
});

input {
  padding: 8px 10px;
  border-radius: 5px;
  font-size: 1.2rem;
}

#error {
  display: block;
  color: red;
  margin: 5px 0 0 0;
}

<input type="text" id="function_code" name="function_code">
<span id="error"></span>

检测输入字段中的错误消息

Detect the error message in the input field

html

javascript

validation

input

error-messaging