Javascript - 如何防止表單發送多重驗證檢查？

看來，如果您的驗證檢查返回false，您可以阻止發送表單。Javascript - 如何防止表單發送多重驗證檢查？

我：在我的JavaScript

<form name="registration" action="registration.php" onsubmit="return validate()"> 
    <!-- some inputs like: --> 
<input type="text" id="username" name="username"> 
<input type="text" id="firstname" name="firstname"> 
<input type="text" id="lastname" name="lastname"> 
    <!-- and some others... --> 
</form>

我的validate（）函數是由多個不同的檢查雖然。

function validate() { 
    checkUsername(); 
    checkPassword(); 
    checkFirstname(); 
    checkLastname(); 
    checkBirthdate(); 
    checkEmail(); 
    checkPhone(); 
}

可能會出現用戶輸入除一個之外的全部有效數據的情況。如果是這樣的話，我該如何告訴validate（）仍然將「false」發送回表單，以便它不提交？

編輯：如果有人仍在閱讀本文，出於某種原因，我的表單仍在發送。我甚至改變了我的validate（）函數，所以唯一的聲明是「return false;」我有語法錯誤還是什麼？編輯2：我發現了另一種簡單的解決方案，即使有點過時。它克服了我在函數僅評估第一個檢查並返回的問題。

function validate() { 
    var truth1 = checkUsername(); 
    var truth2 = checkPassword(); 
    var truth3 = checkFirstname(); 
    var truth4 = checkLastname(); 
    var truth5 = checkBirthdate(); 
    var truth6 = checkEmail(); 
    var truth7 = checkPhone(); 
    return (truth1 && truth3 && truth5 && truth2 && truth4 && truth6 && truth7); 
}

來源

2016-12-07 Nicholas Hassan

嘗試調用'event.preventDefault（）'執行前歸還檢查。如果從所有檢查調用返回'true'，則在'form'元素上調用'.submit（）' – guest271314

我會給它一個鏡頭，但是我認爲有一個更簡單的方法。我基於它的例子來自http://www.w3schools.com/js/js_validation.asp，它非常簡單 –

@NicolasHassan最簡單的方法可能是在每個類中使用'required'和'pattern'屬性「形式」元素 – guest271314

所有individual field validation functions應該返回boolean。

那麼你overall form validation function將

現在烏爾驗證函數將返回false如果任何字段無效。 true如果所有字段都有效

來源

2016-12-07 21:35:19

這很有道理，但我遇到了一些麻煩。爲了排除故障，我更改了validate（），以便它所做的只是「返回false」。但是表單總是發送。我在某處是否犯了語法錯誤？ –

嗨Sagi，我正在解決其他一些問題，我從來沒有機會正確實施你的。這裏的問題是，似乎通過checkUsername返回「false」，它會提示函數停止檢查其餘部分。一旦checkUsername滿意，它仍然發送表單。你有什麼想法如何防止這種情況？ –

@NicholasHassan更新了我的答案，理解我的錯誤。這就是爲什麼Array.prototype.every（）也不起作用，它會在第一次錯誤之後停止評估。 –

只有當所有單獨的檢查函數返回「真」結果時，「驗證」函數才需要返回「真」布爾結果。

這樣做的一種方法是修改當前「驗證」功能中的每一行，如下面的代碼。

bUsernameSts = checkUsername(); 
if !bUsernameSts { return false }; 
... 
<other checks> 
... 
return true;

新的「驗證」功能可以返回「真」的唯一方法是，如果所有單個輸入驗證檢查是成功的。

來源

2016-12-07 21:38:11 JohnH

您可以使用Array.prototype.every()調用各項功能，如果任何函數返回false，false將從.every()通話

<form name="registration" action="registration.php"> 
    <!-- some inputs like: --> 
<input type="text" id="username" name="username"> 
<input type="text" id="firstname" name="firstname"> 
<input type="text" id="lastname" name="lastname"> 
    <!-- and some others... --> 
</form>

function validate() { 
    return [checkUsername, 
     checkPassword, 
     checkFirstname, 
     checkLastname, 
     checkBirthdate, 
     checkEmail, 
     checkPhone].every(function(check) {return check()}); 
} 

document.querySelector("[name=registration]") 
.onsubmit = function(event) { 
    event.preventDefault(); 
    if (validate()) { this.submit() } 
    else { // notify user which fields are invalid } 
}

來源

2016-12-07 21:42:13 guest271314

@NicolasHassan查看更新後的帖子。 – guest271314

Javascript - 如何防止表單發送多重驗證檢查？

回答

相關問題