Javascript只验证我的第一个输入

Javascript only validates my first input

本文关键字：第一个 输入 我的 验证 Javascript      更新时间：2023-09-26

我是Javascript的新手，我正在尝试验证我的表单，但由于某些原因，我的代码只考虑了第一个输入。

如果我尝试插入 1 个字符的输入

名称，它会给我正确的警报框，但如果我插入 1 个字符的输入姓氏，它不会显示相同的警报框。

我看不出我的错误...为什么它只处理第一个输入？有人可以帮助我吗？

.HTML

<form action="registration" name="registrationForm" method="post" onsubmit="return formValidation();">
    <p> Nome <p>
    <input type="text" class="registrationInput" name="nome" placeholder="Nome" required maxlength="45"/>
    <p> Cognome </p>
    <input type="text" class="registrationInput" name="cognome" placeholder="Cognome" required maxlength="45"/>
</form>

JAVASCRIPT

function formValidation(){
    var name = document.registrationForm.nome;
    var surname = document.registrationForm.cognome;
    if(validateName(name)){
        if(validateSurname(surname)) {
        }
    }
    return false;
}
function validateName(name){
    if(name.value.length <= 3 || name.value.length >=45) {
        window.alert("Il nome non è corretto. Deve essere lungo da un minimo di 4 a un massimo di 45 caratteri");
        name.focus();
        return false;
    }
    return true;
}
function validateSurname(surname) {
    if(surname.value.length <= 3 || surname.value.length >=45) {
        window.alert("Il cognome non è corretto. Deve essere lungo da un minimo di 4 a un massimo di 45 caratteri");
        surname.focus();
        return false;
    }
    return true;
}

问题就在这里 

if(validateName(name)){
    if(validateSurname(surname)) {
    }
}

错误是，如果第一个函数调用 validateName（name） 返回 false，则第二个调用将被忽略。也许您必须检查分开的输入。

if(validateName(name)){
}
if(validateSurname(surname)) {
}

阅读评论后更新

像标志一样容易知道失败的输入是什么

var flag = true;
if(!(validateName(name) && flag)){
    flag = false;
    alert("Input 1 fails");
}

if(!(validateSurname(surname) && flag)){
    flag = false;
    alert("Input 2 fails");
}

if(validateName(name)){
    if(validateSurname(surname))
当

且仅当validateName返回时true validateSurname运行。如果始终无条件地验证两者，则不得有条件地嵌套它们：

var valName = validateName(name),
    valSurname = validateName(surname);
return valName && valSurname;

您尝试验证字段是非常无辜的。我建议您尝试一下：

    function formValidation(){
        var nome = document.getElementsByName('nome')[0];
        var cognome = document.getElementsByName('cognome')[0];
        if(!validateInput(nome)){
            //input nome validation is false
            alert("Il nome non è corretto. Deve essere lungo da un minimo di 4 a un massimo di 45 caratteri");
            nome.focus();
            return;
        }
        if(!validateInput(cognome)){
            //input cognome validation is false
            alert("Il cognome non è corretto. Deve essere lungo da un minimo di 4 a un massimo di 45 caratteri");
            cognome.focus();
            return;
        }
    }
    function validateInput(input){
        //input parameter MUST be a DOM Element
        var input_name = input.getAttribute("name");
        //Validation of "nome" input
        if(input_name == "nome"){
            //Minimum length is 4 and maximum length is 45
            if(input.value.length > 3 && input.value.length < 46){
                return true; //This will break execution and return true
            }
        }
        //Validation of "cognome" input
        else if(input_name == "cognome"){
            //Minimum length is 4 and maximum length is 45
            if(input.value.length > 3 && input.value.length < 46) {
                return true; //This will break execution and return true
            }
            //This input validation is exactly the same as
            //nome input validation, so you should ommit the
            //code duplication and use the same validation for
            //both fields.
        }
        //Add more field validations if needed...
        //. . .
        //If the input passed as a parameter doesn't pass the validation
        //this function will return false.
        return false;
    }

我也强烈建议您使用jQuery进行表单验证，因为它简化了很多，请比较一下自己：

function formValidation(){
    var passedvalidation = true;
    //Iterate on all registration inputs
    $(".registrationInput").each(function(){
        var input = $(this); //Get the input object
        var input_name = $(input).attr("name"); //Get the input name
        if(input_name == "nome"){
            //Validate "nome" input
            //If validation is false show message, change input color, etc...
            passedvalidation = false;
        }
        else if(input_name == "cognome"){
            //Validate "cognome" input
            //If validation is false show message, change input color, etc...
            passedvalidation = false;
        }
    });
    return passedvalidation;
}
//Call form validation function and that's all
if(formValidation()){
   //send post to process the form
}

函数 formValidation（） 在验证正常时不返回任何内容。

在验证姓氏之前，您需要返回 true。

...
if(validateName(name)){
    if(validateSurname(surname)) {
        return true;  // <-- YOU NEED TO ADD THIS
    }
}
return false;
...

希望这对你:)有所帮助

相关文章：