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

Question

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

相关代码:

  **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")}
  }
 

Answer 1

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

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