jquery - Jquery 表单验证 - 返回 false 不会结束循环

Question

我想验证一个表单，以便填写所有文本输入字段。为此，我在下面编写了函数，但我的问题是它总是向我显示经过验证的消息。如果我将某些字段留空，它会同时显示为空和已验证的警报。

如果你请帮助或建议更好的方法。

function validate() {
    $("#myform :text").each(function(){
        if($.trim(this.value).length==0){
            alert("Empty!");
            return false;
        }
    });
    return 1;
}
$(document).on('click','#addnew',function() {
    if(validate() != 1){
        return false;
    }
    alert('Verified.');
});

Answer 1

return false;只会退出$.each()循环。您需要在循环中设置一个变量，然后返回：

function validate() {
    var ret = true;
    $("#myform :text").each(function(){
        if($.trim(this.value).length==0){
            alert("Empty!");
            ret = false;
            return false;
        }
    });
    return ret;
}

然后您需要click适当地更改您的处理程序（使用 bools 而不是 -1）；

Answer 2

在您的代码中，空字段之后的任何已完成字段都会导致您的函数返回 1。要解决此问题，请创建一个定义为 true 的变量，如果任何字段为空，则将其设置为 false。

function validate() {
    var isValid = true;
    $('#myform :text').each(function () {
        if($.trim(this.value).length === 0){
            alert('Empty!');
            isValid = false;
        }
    });
    return isValid;
}
$(document).on('click', '#addnew', function () {
    var isValid = validate();
    if (isValid) {
        return false;
    }
    alert('Verified.');
});

Answer 3

我更改了您的代码以返回一个名为 fail 的变量，而不是尝试从您的函数中提前返回。应该更好地工作：

 function validate() {
    var fail = false;
    $("#myform :text").each(function(){
        if($.trim(this.value).length==0){
            alert("Empty!");
            fail = true;
            return false;
        }
    });
    return !fail;
}
$(document).on('click','#addnew',function() {
    if(validate()){  
        return false;
    }
    alert('Verified.');
});

Answer 4

首先，我发现使用 console.log 进行 JavaScript 调试比使用警报更容易（它们不会阻止脚本执行，使时间更加明显）。

因此，您的 validate 函数似乎从未真正返回 -1，它返回 false。正因为如此，click 函数中的比较永远不会是真的，这意味着“已验证”。警报将始终显示。