Javascript表单验证程序函数工作不正常_Javascript_Forms_Function_Validation

Javascript表单验证程序函数工作不正常

javascript forms function validation

Javascript表单验证程序函数工作不正常,javascript,forms,function,validation,Javascript,Forms,Function,Validation,我已经试着让这个函数工作了两个小时了，但是找不到错误所在这是出乎意料的行为当填写表单中的任何字段时，表单将发布到php文件，并且仅当所有字段均为空时显示错误（如预期），即5个错误但是，当这6个字段中的任何一个被填写时，不管表单中是否有其他错误，表单都会被过账请帮我验证一下这张表格 error是我将向用户显示的错误信息。 errors是找到的错误数 JavaScript函数 function formValidator(){ var elementValue = documen

我已经试着让这个函数工作了两个小时了，但是找不到错误所在

这是出乎意料的行为

当填写表单中的任何字段时，表单将发布到php文件，并且仅当所有字段均为空时显示错误（如预期），即5个错误

但是，当这6个字段中的任何一个被填写时，不管表单中是否有其他错误，表单都会被过账

请帮我验证一下这张表格

error

是我将向用户显示的错误信息。

errors

是找到的错误数

JavaScript函数

function formValidator(){

    var elementValue = document.getElementById("first-name").value;
    var elementName = document.getElementById("first-name");
    var errors = 0;
    var error = " ";

    if (elementValue == "" || elementValue == " " || elementValue== NULL){
        error = "First Name shouldn't be left empty.";
        errors = 1;
    }

    var elementValue = document.getElementById("last-name").value;
    var elementName = document.getElementById("last-name");

    if (elementValue == "" || elementValue == " " || elementValue== NULL){
        if (errors == 0){
            error = "Last Name shouldn't be left empty.";
        }
        else{
            error += "<br>Last Name shouldn't be left empty.";
        }
        errors+=1;
    }
    var elementValue = document.getElementById("email-for-registration").value;
    var elementName = document.getElementById("email-for-registration");
    var email_err = "false";
    if (elementValue == "" || elementValue == " " || elementValue== NULL){
        email_err = "true";
    }
    var elementValue = document.getElementById("phone-for-registration").value;
    if ((elementValue == "" || elementValue == " " || elementValue== NULL) && email_err == "true"){
        if (errors == 0){
            error = "Both email and contact cannot be left empty.";
        }
        else{
            error += "<br>Both email and contact cannot be left empty.";
        }
        errors+=1;
    }
    var elementValue = document.getElementById("password-for-registration").value;
    var elementName = document.getElementById("password-for-registration");
    if (elementValue == "" || elementValue == " " || elementValue== NULL){
        if (errors == 0){
            error = "Password shouldn't be left empty.\nSelect a strong password atleast 6 characters long.";
        }
        else{
            error += "<br>Password shouldn't be left empty.Select a strong password atleast 6 characters long.";
        }
        errors+=1;
    }
    else if (elementValue.length<6){
        if (errors == 0){
            error = "Password less than 6 characters aren't allowed for security reasons.";
        }
        else{
            error += "<br>Password less than 6 characters aren't allowed for security reasons.";
        }
        errors+=1;
    }
    email_err = document.getElementById("confirm-password-for-registration").value;
    var elementName = document.getElementById("confirm-password-for-registration");
    if (elementValue != email_err){
        if (errors == 0){
            error = "The password to confirm doesn't match with your desired password.";
        }
        else{
            error += "<br>The password to confirm doesn't match with your desired password.";
        }
        errors+=1;
    }
    var elementValue = document.getElementById("agreed-for-registration");
    var elementName = document.getElementById("agreed-for-registration");
    if (!elementValue.checked){
        if (errors == 0){
        error = "Please go through our <a href=''>Terms and Conditions</a>, and make sure you agree to continue.";
         document.getElementById("agreed-for-registration").focus();
        }
        else{
            error += "<br>Please go through our <a href=''>Terms and Conditions</a>, and make sure you agree to continue.";
        }
        errors+=1;
    }


    alert(errors);

    if (errors > 1){
        document.getElementById("form_errors").innerHTML = "<h4 style='color:red;'>Please remove the following errors from form to continue.</h4>";
        document.getElementById("form_errors").innerHTML += "<h5>" + error + "</h5><br>";
        return false;
    } else if (errors == 1){
        alert(error);
        elementName.focus();
        return false;
    } else if (errors == 0){
        return true;
    }
    return false;
}

函数formValidator（）{
var elementValue=document.getElementById（“名字”）.value；
var elementName=document.getElementById（“名字”）；
var误差=0；
var误差=”；
if（elementValue==“”| | elementValue==“”| | elementValue==NULL）{
error=“First Name不应为空。”；
误差=1；
}
var elementValue=document.getElementById（“姓氏”）.value；
var elementName=document.getElementById（“姓氏”）；
if（elementValue==“”| | elementValue==“”| | elementValue==NULL）{
如果（错误==0）{
error=“姓氏不应为空。”；
}
否则{
错误+=“
姓氏不应为空。”；
}
误差+=1；
}
var elementValue=document.getElementById（“注册电子邮件”）.value；
var elementName=document.getElementById（“注册电子邮件”）；
var email_err=“false”；
if（elementValue==“”| | elementValue==“”| | elementValue==NULL）{
电子邮件\u err=“true”；
}
var elementValue=document.getElementById（“注册电话”）.value；
if（（elementValue==“”| | elementValue==“”| | elementValue==NULL）和&email_err==true）{
如果（错误==0）{
error=“电子邮件和联系人都不能为空。”；
}
否则{
错误+=“
电子邮件和联系人不能为空。”；
}
误差+=1；
}
var elementValue=document.getElementById（“注册密码”）.value；
var elementName=document.getElementById（“注册密码”）；
if（elementValue==“”| | elementValue==“”| | elementValue==NULL）{
如果（错误==0）{
error=“密码不应为空。\n请选择至少6个字符长的强密码。”；
}
否则{
错误+=“
密码不应为空。请选择至少6个字符长的强密码。”；
}
误差+=1；
}
else if（elementValue.length 1）{
document.getElementById（“表单错误”）.innerHTML=“请从表单中删除以下错误以继续。”；
document.getElementById（“form_errors”）.innerHTML+=“”+error+“
”；
返回false；
}else if（错误==1）{
警报（错误）；
elementName.focus（）；
返回false；
}else if（错误==0）{
返回true；
}
返回false；
}

函数在这里调用

<form name="registration" class="deco_blu_form" action="<?=$base_url;?>forms/confirm-registration/members.php" method="post" onsubmit="return formValidator();">

首先，我计算以下字段：
名字
姓
注册电邮
登记电话
注册密码
确认注册密码
同意注册
以防万一，若你们用绝对值做某事
我构建了一个小型的概念验证脚本，并且遇到了这样一个问题：如果没有id为form#u错误的元素，那么这个脚本就无法工作。这可能是你的问题吗？这样，调用document.getElementById（“form\u errors”）
将导致未定义，并且函数不会返回false

对未定义元素的相同检查当然也适用于其他字段；）
 
您需要有elementValue==“NULL”
或elementValue==NULL

我将console.log
而不是alert和onblur
触发器放在控制台上，以便于调试
因此，完整的代码是：
function formValidator() {

var elementValue = document.getElementById("first-name").value;
var elementName = document.getElementById("first-name");
var errors = 0;
var error = " ";

if (elementValue == "" || elementValue == " " || elementValue === "NULL") {
    error = "First Name shouldn't be left empty.";
    errors = 1;
}

var elementValue = document.getElementById("last-name").value;
var elementName = document.getElementById("last-name");

if (elementValue == "" || elementValue == " " || elementValue === "NULL") {
    if (errors == 0) {
        error = "Last Name shouldn't be left empty.";
    } else {
        error += "<br>Last Name shouldn't be left empty.";
    }
    errors += 1;
}
var elementValue = document.getElementById("email-for-registration").value;
var elementName = document.getElementById("email-for-registration");
var email_err = "false";
if (elementValue == "" || elementValue == " " || elementValue === "NULL") {
    email_err = "true";
}
var elementValue = document.getElementById("phone-for-registration").value;
if ((elementValue == "" || elementValue == " " || elementValue === "NULL") && email_err == "true") {
    if (errors == 0) {
        error = "Both email and contact cannot be left empty.";
    } else {
        error += "<br>Both email and contact cannot be left empty.";
    }
    errors += 1;
}
var elementValue = document.getElementById("password-for-registration").value;
var elementName = document.getElementById("password-for-registration");
if (elementValue == "" || elementValue == " " || elementValue === "NULL") {
    if (errors == 0) {
        error = "Password shouldn't be left empty.\nSelect a strong password atleast 6 characters long.";
    } else {
        error += "<br>Password shouldn't be left empty.Select a strong password atleast 6 characters long.";
    }
    errors += 1;
} else if (elementValue.length < 6) {
    if (errors == 0) {
        error = "Password less than 6 characters aren't allowed for security reasons.";
    } else {
        error += "<br>Password less than 6 characters aren't allowed for security reasons.";
    }
    errors += 1;
}
email_err = document.getElementById("confirm-password-for-registration").value;
var elementName = document.getElementById("confirm-password-for-registration");
if (elementValue != email_err) {
    if (errors == 0) {
        error = "The password to confirm doesn't match with your desired password.";
    } else {
        error += "<br>The password to confirm doesn't match with your desired password.";
    }
    errors += 1;
}
var elementValue = document.getElementById("agreed-for-registration");
var elementName = document.getElementById("agreed-for-registration");
if (!elementValue.checked) {
    if (errors == 0) {
        error = "Please go through our <a href=''>Terms and Conditions</a>, and make sure you agree to continue.";
        document.getElementById("agreed-for-registration").focus();
    } else {
        error += "<br>Please go through our <a href=''>Terms and Conditions</a>, and make sure you agree to continue.";
    }
    errors += 1;
}


console.log(errors)

if (errors > 1) {
    document.getElementById("form_errors").innerHTML = "<h4 style='color:red;'>Please remove the following errors from form to continue.</h4>";
    document.getElementById("form_errors").innerHTML += "<h5>" + error + "</h5><br>";
    return false;
} else if (errors == 1) {
    alert(error);
    elementName.focus();
    return false;
} else if (errors == 0) {
    return true;
}
return false;
}

函数formValidator（）{
var elementValue=document.getElementById（“名字”）.value；
var elementName=document.getElementById（“名字”）；
var误差=0；
var误差=”；
if（elementValue==“”| | elementValue==“”| | elementValue===“NULL”）{
error=“First Name不应为空。”；
误差=1；
}
var elementValue=document.getElementById（“姓氏”）.value；
var elementName=document.getElementById（“姓氏”）；
if（elementValue==“”| | elementValue==“”| | elementValue===“NULL”）{
如果（错误==0）{
error=“姓氏不应为空。”；
}否则{
错误+=“
姓氏不应为空。”；
}
误差+=1；
}
var elementValue=document.getElementById（“注册电子邮件”）.value；
var elementName=document.getElementById（“注册电子邮件”）；
var email_err=“false”；
if（elementValue==“”| | elementValue==“”| | elementValue===“NULL”）{
电子邮件\u err=“true”；
}
var elementValue=document.getElementById（“注册电话”）.value；
如果（（elementValue==“”| | elementValue==“”| | elementValue==“NULL”）&电子邮件错误==“true”）{
如果（错误==0）{
error=“电子邮件和联系人都不能为空。”；
}否则{
错误+=“
电子邮件和联系人不能为空。”；
}
误差+=1；
}
var elementValue=document.getElementById（“注册密码”）.value；
var elementName=document.getElementById（“注册密码”）；
if（elementValue==“”| | elementValue==“”| | elementValue===“NULL”）{
如果（错误==0）{
error=“密码不应为空。\n请选择至少6个字符长的强密码。”；
}否则{
错误+=“
密码不应为空。请选择至少6个强密码