javascript - 使用 javascript 使用 if-else 条件进行表单验证

Question

我使用以下代码完成了 javascript 表单验证。我不确定这是否是验证表单的正确方法。

const signup=()=>{
    let name=document.querySelector("#u_name").value;
    let email=document.querySelector("#email_id").value;
    let password=document.querySelector("#pwd").value;
    let confirmPassword=document.querySelector("#confirm_pwd").value;
    let i=0;
    if((name==""||email=="")||(password==""||confirmPassword==""))
    {
        document.querySelector("#empty-field").innerHTML="*Fill all required fields";
        i++;
    }
    else
    {
    if(name.length<3)
    {
        document.querySelector("#u_name").style.borderColor="red";
        document.querySelector("#user-errmsg").innerHTML="*Enter valid user name";
        i++;
    }
    else
    {
        document.querySelector("#u_name").style.borderColor="#ced4da";
        document.querySelector("#user-errmsg").innerHTML="";
        i;
    }
    if(email.length<6)
    {
        document.querySelector("#email_id").style.borderColor="red";
        document.querySelector("#email-errmsg").innerHTML="*Enter valid email id";
        i++;
    }
    else
    {
        document.querySelector("#email_id").style.borderColor="#ced4da";
        document.querySelector("#email-errmsg").innerHTML="";
        i;
    }
    if(password.length<6 && confirmPassword.length<6)
    {
        document.querySelector("#pwd").style.borderColor="red";
        document.querySelector("#confirm_pwd").style.borderColor="red";
        document.querySelector("#pwd-errmsg").innerHTML="*Password must be atleast 6 digits long";
        i++;
    }
    else if(password.length<6 && confirmPassword.length>=6)
    {
        document.querySelector("#confirm_pwd").style.borderColor="red";
        document.querySelector("#pwd").style.borderColor="red";
        document.querySelector("#pwd-errmsg").innerHTML="*Password must be atleast 6 digits long";
        i++;
    }
    else if(password.length>=6 && confirmPassword.length>=6)
        {
            if(password!= confirmPassword)
            {
                document.querySelector("#pwd").style.borderColor="red";
                document.querySelector("#confirm_pwd").style.borderColor="red";
                document.querySelector("#pwd-errmsg").innerHTML="*Both fields must have the same password";
                i++;
            }
            else
            {
                document.querySelector("#pwd").style.borderColor="#ced4da";
                document.querySelector("#confirm_pwd").style.borderColor="#ced4da";
                document.querySelector("#pwd-errmsg").innerHTML="";
                i;
            }
        }
    else
    {
        document.querySelector("#pwd").style.borderColor="red";
        document.querySelector("#confirm_pwd").style.borderColor="red";
        document.querySelector("#pwd-errmsg").innerHTML="*Both fields must have the same password";
        i++;
    }
    document.querySelector("#empty-field").innerHTML="";
    }
    if(i==0)
    return true;
    else
    return false
}

写太多 if else 条件是一个好习惯吗？如果没有，我该如何重写？

//忽略

看起来 stackoverflow 不允许发布这个问题，但细节较少:/所以我似乎必须添加更多内容。

Answer 1

您对在单个方法范围内使用太多 if/else 语句的担忧是合理的。这并没有错，但会使代码难以阅读/理解，并且在出现问题时难以调试/故障排除。以下是重构此方法的一些建议:

1. 它似乎没有进行注册。您正在验证输入数据，因此我建议将其重命名为 validate 或类似名称。
2. 方法做得太多了。它正在查询数据、执行验证以及呈现消息和调整样式。我建议分而治之。让这个方法只是一个验证方法。
3. 创建执行单次验证的小函数。例如 validateEmailAddress() 或 validatePassword()。一旦开始移动棋子，if/elseif 语句就会减少。

你可以做的事情还有很多，但关键是责任解耦。如果您尝试这样做，我相信您的 if/elseif 数量将会减少。

我一直使用另一种策略来删除 if/else 嵌套级别，通常称为 early return .