【问题标题】:Javascript Form Validation (Return Issue)Javascript 表单验证(返回问题)
【发布时间】:2017-05-17 01:22:22
【问题描述】:

我的 Javascript 表单验证存在问题,我试图返回 true 或 false 值但它不起作用。它只返回第一个 if/else 语句(无论是 true 还是 false)并从那里返回不起作用。一旦你看到 javascript 代码,你应该明白我在做什么。

$('#button').click(function(){
    name = $("#name").val(); //name input
    age = $("#age").val(); //age input
    sex = $("#sex").val(); // sex input

    if(name.match(/(\w)\s(\w)/)){
        return true;
    }
    else {
            $('.form-row:first-child').css('border','1px solid red');
            return false;
    }

    if (age < 0 || age > 130 || isNaN(age)) {
            $('.form-row:nth-child(2)').css('border','1px solid red');
            return false;
    }
    else {
        return true;
    }

        if (sex == "male" || sex == "Male" || sex == "female" || sex == "Female"){
            return true;
        }
        else {
            $('.form-row:nth-child(3)').css('border','1px solid red');
            return false;
        }

  });

【问题讨论】:

    标签: javascript forms validation return


    【解决方案1】:

    return 会跳出函数。相反,设置一个标志并在最后返回该标志。

    $('#button').click(function(){
        returnFlag = false
        name = $("#name").val(); //name input
        age = $("#age").val(); //age input
        sex = $("#sex").val(); // sex input
    
        if(name.match(/(\w)\s(\w)/)){
            returnFlag = true;
        }
        else {
                $('.form-row:first-child').css('border','1px solid red');
                returnFlag = false;
        }
    
        if (age < 0 || age > 130 || isNaN(age)) {
                $('.form-row:nth-child(2)').css('border','1px solid red');
                returnFlag = false;
        }
        else {
            returnFlag = true;
        }
    
            if (sex == "male" || sex == "Male" || sex == "female" || sex == "Female"){
                returnFlag = true;
            }
            else {
                $('.form-row:nth-child(3)').css('border','1px solid red');
                returnFlag = false;
            }
    
        return returnFlag;
      });

    【讨论】:

    • 现在的问题是第一个 if..else 可能会将标志设置为 false,但下一个可能会将其重置为 true...
    • 你说得对,我什至没有想到这一点。我想实际上在 returnFlag == false 的地方返回 false 取决于用例。
    • returnFlag 可以初始化为 true,然后在测试过去时不设置,如果测试失败则设置为 false . ;-)
    猜你喜欢
    • 1970-01-01
    • 2015-12-09
    • 1970-01-01
    • 1970-01-01
    • 2011-09-12
    • 1970-01-01
    • 1970-01-01
    • 2015-07-18
    • 2018-08-17
    相关资源
    最近更新 更多