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中使用CCD_ 1属性来完成。

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

Answer 2

因为您正在讨论提交，所以我假设您也有一个FORM标记。

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

#1.不要使用onXXX事件注册。这是HTML/Javascript中一个危险的可破解功能，如果您使用内容安全策略，则不允许使用该功能。相反，使用

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

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