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

我已经用下面的代码进行了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
}

const注册=（）=>{
让name=document.querySelector（“#u_name”）.value；
让email=document.querySelector（“#email_id”）.value；
让password=document.querySelector（“#pwd”）.value；
让confirmPassword=document.querySelector（“#confirm_pwd”）.value；
设i=0；
如果（（姓名=“”| |电子邮件=“”）| |（密码=“”| |确认密码=“”）
{
document.querySelector（“#空字段”）.innerHTML=“*填写所有必填字段”；
i++；
}
其他的
{
if（name.length您担心在单个方法范围内使用过多的if/else语句是正确的。这没有错，但会使代码难以阅读/理解，并且在出现问题时难以调试/排除故障。以下是重构此方法的一些建议：

似乎它没有注册。您正在验证输入数据，因此我建议将其重命名为
validate
或类似名称
方法做的太多了。它查询数据，执行验证，还呈现消息和调整样式。我建议分而治之。将此方法作为验证方法
创建执行单个验证的小函数。例如
validateEmailAddress（）
或
validatePassword（）
。一旦开始移动片段，if/elseif语句就会减少
你可以做的事情还有很多，但关键是责任分离。如果你尝试这样做，我相信你的If/elseif数量会减少

还有另外一种策略，我一直在使用它来删除通常称为的if/else嵌套级别。
您担心在单个方法的范围内使用过多if/else语句，这是一种有效的策略。它没有错，但会使代码难以读取/理解，并且在出现错误时难以调试/排除故障。H以下是重构此方法的一些建议：

似乎它没有注册。您正在验证输入数据，因此我建议将其重命名为
validate
或类似名称
方法做的太多了。它查询数据，执行验证，还呈现消息和调整样式。我建议分而治之。将此方法作为验证方法
创建执行单个验证的小函数。例如
validateEmailAddress（）
或
validatePassword（）
。一旦开始移动片段，if/elseif语句就会减少
你可以做的事情还有很多，但关键是责任分离。如果你尝试这样做，我相信你的If/elseif数量会减少

还有另外一种策略，我一直在使用它来删除if/else嵌套级别，通常称为。
将所有内容提取到函数中，您的代码将受益匪浅：

  const get = selector => document.querySelector(selector);

 const checker = (check, msg) => (el, error) => {
  if(check(get(el).value)){
    get(el).style.color = "green";
    get(error).innerHTML = "";
    return true;
  } else {
    get(el).style.color = "red";
    get(error).innerHTML = msg;
  }
 };

 const minLength = length => checker(
   v => v.length >= length,
  `Too short! You need at least ${length} chars`
 );

 const maxLength = length => checker(
   v => v.length <= length,
  `Too long! You need less than ${length} chars`
 );

 const equal = (a, b, err) => checker(v => v === get(b).value, "They must be equal")(a, err);

您的代码将受益于将所有内容提取到函数中：

  const get = selector => document.querySelector(selector);

 const checker = (check, msg) => (el, error) => {
  if(check(get(el).value)){
    get(el).style.color = "green";
    get(error).innerHTML = "";
    return true;
  } else {
    get(el).style.color = "red";
    get(error).innerHTML = msg;
  }
 };

 const minLength = length => checker(
   v => v.length >= length,
  `Too short! You need at least ${length} chars`
 );

 const maxLength = length => checker(
   v => v.length <= length,
  `Too long! You need less than ${length} chars`
 );

 const equal = (a, b, err) => checker(v => v === get(b).value, "They must be equal")(a, err);

使用jquery插件

下面是要使用的示例：
$（函数（）{
//初始化注册表上的表单验证。
//它具有name属性“myform”
$（“form[name='myform']）。验证({
//指定验证规则
规则：{
名字：“必选”，
姓氏：“必需”，
电邮：{
要求：正确，
电子邮件：真的
},
密码：{
要求：正确，
最小长度：5
}
},
//指定验证错误消息
信息：{
名字：“请输入您的名字”，
姓氏：“请输入您的姓氏”，
密码：{
必填：“请提供密码”，
minlength:“您的密码长度必须至少为8个字符”
},
电子邮件：“请输入有效的电子邮件”
},
submitHandler:函数（表单）{
表单提交（）；
}
});
})使用jquery插件

下面是要使用的示例：
$（函数（）{
//初始化注册表上的表单验证。
//它具有name属性“myform”
$（“form[name='myform']）。验证({
//指定验证规则
规则：{
名字：“必选”，
姓氏：“必需”，
电邮：{
要求：正确，
电子邮件：真的
},
密码：{
要求：正确，
最小长度：5
}
},
//指定验证错误消息
信息：{
名字：“请输入您的名字”，
姓氏：“请输入您的姓氏”，
密码：{
必填：“请提供密码”，
minlength:“您的密码长度必须至少为8个字符”
},
电子邮件：“请输入有效的电子邮件”
},
submitHandler:函数（表单）{
表单提交（）；
}
});
})；
您不需要任何javascript验证或额外的库，只需使用字段上需要的所有属性和正确的类型。使用“约束验证”。只需检查密码是否匹配（如下所示）

在此处研究输入属性：


函数validatePassword（）{
const pwd1=document.getElementById（“pwd”）
const pwd2=document.getElementById（“确认”）
pwd1.setCustomValidity（pwd1.value！==pwd2.value
？“密码不匹配”
: ""
)
}
document.getElementById（“pwd”）.oninput=validatePassword
document.getElementById（“confirm_pwd”）.oninput=validatePassword
输入：不（[type=submit]）：有效{
边框：1px固体石灰；
}


名称


电子邮件


pwd


重复pwd



您不需要任何javascript验证或额外的库，只需使用字段上需要的所有属性和正确的类型。使用“约束验证”。只需检查密码是否匹配（如下所示）

研究inp