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 - 如何防止表单发送多重验证检查？

回答

相关问题