3

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

例如，如果用户*在输入字段中键入，则错误消息可能会显示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>

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

输出1

4

3 回答 3

4

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

于 2020-06-21T09:07:36.077 回答
2

首先，我会将输入包装在一个表单中。之后，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>

于 2020-06-21T09:05:11.593 回答
0

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

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

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

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

于 2020-06-21T08:50:57.727 回答