Question

为此，我正试图远离JQuery（不反对JQuery，我只是不想为这个小项目将巨大的库加载到该项目中）。

我很好奇如何告诉HTML5以给定的形式重新检查所有必需的输入字段。例如，我有这种形式（尽管稍微复杂一点，但您明白了）：

<form action="here" onsubmit="check()">
    <input required name="something">
    <input type="submit">
</form>

如果该必填字段中没有任何内容，则HTML5会显示一个弹出错误，效果类似于“请填写此必填字段”。是什么使用户无法输入单个空格或诸如%或>之类的无用字符？我想部分验证此客户端（除了服务器端），因此当页面重定向到表单提交页面然后显示错误，然后返回到表单并提示用户再次输入所有内容。

假设在我的onsubmit函数check中，我从字符串的末尾删除了所有空格和/或废话字符，然后该函数如何告诉HTML5重新检查表单以查看所需字段是否仍然存在不为空？

Answer 1

尝试使用正则表达式模式（例如，排除白色字符：[^\s]*，仅允许使用字母[A-Za-z]*，...）

<form action="here" onsubmit="check()">
    <input required pattern="[^\s]*" name="something" >
    <input type="submit">
</form>

Answer 2

使用onsubmit="check()"代替addEventListener。现在，您可以使用输入数据进行所有操作。

document.getElementById("submit").addEventListener("click", function(event){
  var something = document.getElementById("something").value;
  document.getElementById("something").value = something.replace(/[^A-Z0-9]/ig, "");
});

<form action="here">
    <input required name="something" id="something">
    <input type="submit" id="submit">
</form>

如何在JavaScript / HTML5中重新检查必填字段

2 个答案: