JS 在表单允许提交之前输入正确的短语答案

【问题标题】：JS to enter a correct phrase before form allows to be submittedJS 在表单允许提交之前输入正确的短语
【发布时间】：2020-09-02 17:26:54
【问题描述】：

我正在尝试让我们的联系页面仅在输入正确的短语后才允许提交。我不知道如何并尝试了警报功能。它会在输入错误的短语时发出警报，但仍会提交表单。基本上我试图阻止自动提交我们的表单。

相关代码：

  **HTML:**

  <label for="phrase" class="p">Please enter "security" below</label><br>
  <input type="text" id="phrase" name="phrase" required></type><br>

   <input type="submit"; onclick="no_spam()"; value="Submit"></type>

  **JS:**

  function no_spam() {
  var spam = document.getElementById("phrase").value;
  if(spam !== "security") 
  {alert("Enter correct phrase")}
  }

【问题讨论】：

你要熟悉forms
我建议您看看 google recaptcha 并尝试使用它。无需重新发明轮子。
查看此资源：w3schools.com/js/js_validation.asp
谢谢。模式属性完美运行。重新回顾：我不是想重新发明轮子，只是好奇如何让它发挥作用。现在我知道。谢谢。

标签： javascript

【解决方案1】：

您不需要任何 JavaScript；它可以使用pattern 属性完全在 HTML5 中完成。

<form>
  <label for="phrase" class="p">Please enter "security" below</label><br>
  <input type="text" id="phrase" name="phrase" required pattern="^security$" title="Enter correct phrase"></type><br>
  <input type="submit" value="Submit"></type>
</form>

【讨论】：

【解决方案2】：

因为你说的是提交，所以我假设你也有一个 FORM 标签。

<form action=...>
<input name=.... />
</form>

#1。不要使用 onXXX 事件注册。这是 HTML/Javascript 中的一项危险的可破解功能，如果您使用 Content-Security-Policy，则不允许使用该功能。相反，使用

document.getElementById("myForm").addEventListener("submit", function(e) {
  //validate your form. If not valid, call e.preventDefault();
});

您可以做的另一件事（假设您使用的是 HTML 5）是使用 pattern 属性创建一个正则表达式以确保输入有效。使用该属性，如果字段未通过验证，表单将不会提交

【讨论】：