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

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

Answer 2

首先，我将输入包装成表格。之后，如果条件为true，则可以对输入字段使用setCustomValidity函数来设置自定义消息。当您按Enter键或提交表单时，您将看到错误消息。这样，您可以为输入提供任何自定义消息。注意处理其他错误情况下的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

使用HTML5模式匹配，下面我使用了模式（[a-zA-Z0-9] +），该模式仅表示仅拉丁字母和数字0-9的字符。您可以在其中添加空格字符（[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>

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

3 个答案: