我寫了一個 Javascript 在提交之前驗證我的表單。Javascript 的功能是防止我的表單在用戶提供與我的 Javascript 中的結果匹配的電話號碼時自行提交，而是顯示一條錯誤訊息，指出“電話號碼已使用！”
我的問題是驗證作業正常：用戶收到警報，提示他們提供的電話號碼已被使用，但我的表單在顯示錯誤訊息后仍自行提交。
我做錯了什么？
下面是我的代碼。
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>uj5u.com熱心網友回復：
我認為您需要添加 e.preventDefault() 以便在您點擊提交時停止重新加載頁面。
uj5u.com熱心網友回復：
您需要將函式系結到 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() 你也可以只回傳 false：
https://stackoverflow.com/a/65538474/9441244
在您的情況下，您的 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.");
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/329275.html
標籤：javascript html 形式 验证