在 jquery 的一个函数中验证表单元素

Question

var client_name     = $("#client_name");
var client_surname  = $("#client_surname");
var client_phone    = $("#client_phone");
var form            = $("#billing_form");

Validate(client_name);
Validate(client_surname);
Validate(client_phone);

form.submit(function(e){
  if(Validate(client_name) && Validate(client_surname) && Validate(client_phone)){
     e.preventDefault();
     console.log("True");
     return true;
 } else {
     console.log("False");
     return false;  
 }
});

function Validate(id){
 id.blur(function(){
  if(id.val().length <= 0){
     id.addClass("input_error").removeClass("input_apply").css("border","1px solid #ff0000");
     return false;
} else {
     id.removeClass("input_error").removeAttr("style");
     return true;
       }
   });
}

我编写这个函数是为了在一个函数中验证我的所有输入，但它任何时候都不会返回 true。如果我填写了所有输入，它会再次返回 false。谁能帮帮我？

Answer 1

您的Validate 函数不返回任何内容。从该函数内部没有 return 语句这一事实可以看出这一点。它所做的只是在传递给它的元素上绑定blur 事件处理程序；该事件的处理函数返回true 或false，但这与Validate 函数完全无关。

我怀疑函数内部缺少 return 会隐式导致 undefined 被返回，而对于布尔条件，它又会评估为 false，这就是为什么你永远看不到 true 的原因（因为它从来不是）。只需在 Validate 函数中取出事件处理程序绑定即可：

function Validate(id) {
    if (id.val().length <= 0) {
        id.addClass("input_error").removeClass("input_apply").css("border", "1px solid #ff0000");
        return false;
    } else {
        id.removeClass("input_error").removeAttr("style");
        return true;
    }
}

它不会在您修改输入值时进行验证，但它应该在您提交表单时正确验证它们。

如果您想保留blur 事件处理程序，那么您可以这样做：

var client_name     = $("#client_name");
var client_surname  = $("#client_surname");
var client_phone    = $("#client_phone");
var form            = $("#billing_form");

function blurValidation() {
    var $this = $(this);
    if(this.value.length <= 0) {
        $this.addClass("input_error").removeClass("input_apply").css("border","1px solid #ff0000");
        return false;
    }
    else {
        $this.removeClass("input_error").removeAttr("style");
        return true;
    }
}

client_name.blur(blurValidation);
client_surname.blur(blurValidation);
client_phone.blur(blurValidation);


form.submit(function(e){
    client_name.blur();
    client_surname.blur();
    client_phone.blur();
    if(Validate(client_name) && Validate(client_surname) && Validate(client_phone)){
        e.preventDefault();
        console.log("True");
        return true;
    } else {
        console.log("False");
        return false;  
    }
});

function Validate(id){
    return !id.hasClass("input_error");
}

Answer 2

用$("#client_name").val();代替这个$("#client_name")

替换

if (id.val().length <= 0) {

有

if (id.val() == "") {