Javascript 表单验证器功能无法正常工作

Posted 2023-02-22

技术标签:

【中文标题】Javascript 表单验证器功能无法正常工作【英文标题】：Javascript form validator function not working properly 【发布时间】：2013-06-23 12:52:25 【问题描述】：

我已经尝试让这个功能工作了两个小时，但我无法找到错误所在。

这是出乎意料的行为。

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

但是，当填写 6 个字段中的任何一个时，无论表单中的其他错误如何，都会发布表单。

请帮我验证这个表格。

error 是我将显示给用户的错误信息。 errors 是发现的错误数。

javascript function

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;

这里调用的函数。

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

请询问是否需要任何其他信息、代码或解释。

【问题讨论】：

你收到alert(errors); 了吗？ @Sergio 是的，但正如我所说，只有当所有字段都为空时，我才会收到 5 个错误。否则什么都没有。我想知道您使用NULL 而不是null 是否是问题所在。不要依赖客户端验证不要在每次重新分配 elementValue 和 elementName 变量时使用 var。 【参考方案1】：

FIDDLE

您需要有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;

【讨论】：

【参考方案2】：

一开始我统计了以下几个字段：

名字姓氏注册电子邮件电话注册注册密码确认注册密码同意注册

以防万一你用绝对值做某事。

我已经构建了一个小型概念验证脚本，但遇到此脚本不起作用，如果您没有 ID 为 #form_errors 的元素。这可能是你的问题吗？这样对document.getElementById("form_errors") 的调用将导致未定义，并且函数不会返回false。

对未定义元素的相同检查当然也适用于其他字段；）

【讨论】：

对不起，我有他们。谢谢你的努力。我有解决办法。

以上是关于Javascript 表单验证器功能无法正常工作的主要内容，如果未能解决你的问题，请参考以下文章

CakePHP 模型验证无法正常工作

Javascript 表单无法正常工作