表单验证有效，但在用户输入错误答案时仍会提交

Question

我写了一个 Javascript 在提交前验证我的表格。 Javascript 的功能是当用户提供的 phone 数字与我的 Javascript 中的结果相匹配时，阻止我的表单提交自己，而是显示一条错误消息“Phone 号码已被使用！"

我的问题是验证工作正常：用户收到警告，提示他们提供的 phone 号码已被使用，但我的表单在显示错误消息后仍自行提交。

我做错了什么？

下面是我的代码。

function check(form) /*function to check used phone number*/ {
    /*the following code checkes whether the entered phone number is matching*/

  if (form.phonenum.value == "0807575566464" 
|| form.phonenum.value == "09057487463") 
{
    alert("Phone number used! provide a new one! \n") /*displays error message*/
} else if (form.phonenum.value.length<11 || form.phonenum.value.length>11) { alert("Phone number should be 11 digits! \nAnd it should begin with; 080, 081, 070, 090, or 091.");
} 
else {
    return false;
  }

 
}

<form action='' method='POST' enctype="multipart/form-data" id="formName">
  <input type="text" id="phonenum" name="myinput">
  <button href='/' type='submit' onclick="check(this.form)">Submit</button>
</form>

Answer 1

我认为您需要添加 e.preventDefault() 以使其在您点击提交时停止重新加载页面。

Answer 2

你需要给onsubmit事件绑定一个函数，如果验证失败就停止该事件。

HTML:

<form action='' method='POST' enctype="multipart/form-data" id="formName" onsubmit="validateForm(event)">

JavaScript:

function validateForm(event) {
  if(validation fails...) {
    event.preventDefault();
    ....
  }
}

preventDefault 函数的文档和示例： https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

除了使用 event.preventDefault() 你也可以 return false:

在你的情况下你的 JavaScript 应该是这样的

HTML:

<form action='/test/' method='POST' enctype="multipart/form-data" id="formName" onsubmit="validateForm(event)">
  <input type="text" id="phonenum" name="myinput">
  <button href='/' type='submit'>Submit</button>
</form>

JavaScript:

function validateForm(event) {
    if (this.phonenum.value == "0807575566464" || this.phonenum.value == "09057487463") {
        event.preventDefault();
        alert("Phone number used! provide a new one! \n");
    } else if (this.phonenum.value.length != 11) { 
        this.preventDefault();
        alert("Phone number should be 11 digits! \nAnd it should begin with; 080, 081, 070, 090, or 091.");
    }
}

表单验证有效，但在用户输入错误答案时仍会提交

Form Validation Works But Still Submits When User Input The Wrong Answer

html

javascript

forms

validation