在提交表单之前验证表单输入答案

【问题标题】：Validating form input before submiting form在提交表单之前验证表单输入
【发布时间】：2015-10-12 15:03:02
【问题描述】：

我已经学会了制作登录表单，我打算验证两个值（电子邮件和密码）并将其用作条件真或假。

我有这样的代码

    function userValid(email) {
    var usr = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$\i/ ;
    return usr.test(email);     
    };

    function passValid(password) {
    var passw = /^[A-Za-z]\w{7,14}$/;
    return passw.test(password);            
    };

上面的代码用于验证我的表单中的电子邮件和密码，我认为如果我将值传递给该函数（例如将值电子邮件传递给 userValid() 函数），它将返回 true/false。

我计划创建验证表单或登录表单，在我提交之前首先检查用户电子邮件和密码是否有效（让我们对服务器说）。

我认为逻辑是这样的：

如果两个值都为 TRUE，则登录成功
如果其中一个值为 TRUE，则登录失败
如果两个值都为 FALSE，则登录失败
else（值必须为 EMPTY 或 NULL）然后请输入电子邮件和密码

等等

我的问题是如何使用 ABOVE 创建条件语句，当然还有 JAVASCRIPT :) 谢谢。

【问题讨论】：

不要将 TLD 限制为 6 个字符

标签： javascript forms validation

【解决方案1】：

我不知道您如何访问电子邮件和密码，但如果您填写这些内容，应该可以使用。

if ( userValid(email) == true && passValid(password) == true ) {
   //Login succes code
}
else if ( userValid(email) == false || passValid(password) == false ){
   //Login failure code
}
else {
   //The "Please insert" code
}

&& 运算符 (and) 仅在两个值都为真时才返回真。

如果至少有一个值为真，则|| 运算符（或）返回真。

这可能更容易完成，但它应该像这样工作。

您可以添加代码来检查密码和用户名是否为空，但我认为没有必要。

【讨论】：

【解决方案2】：

因此，您要做的是创建一个在用户尝试提交表单时调用的函数。如果此函数返回 false，则表单将不会提交。否则它会提交表单。你可以这样写：

var yourForm = document.getElementById("yourForm");
var yourEmail = document.getElementById("yourEmail");
var yourPassword = document.getElementById("yourPassword");
var yourWarningLabel = document.getElementById("yourWarningLabel");    

yourForm.onsubmit = function() {
    if (yourEmail.value == "" || yourPassword.value == "") { //Check if the fields have something in them
        yourWarningLabel.innerHTML = "Please Insert Email and Password";
        return false;
    } else return (userValid(yourEmail.value) && passValid(yourPassword.value));
};

其中 yourWarningLabel 是 <p>、<label> 或用于显示警告的其他文本标签。

双管道|| 代表OR 运算符，这意味着如果电子邮件为空或密码为空，我们应该显示警告。

双符号&& 表示AND 运算符，这意味着如果电子邮件通过并且密码通过检查，则我们返回true 并提交表单，否则返回false。

除此之外，您还应该检查和清理服务器端或使用输入的页面中的输入。

【讨论】：