如何使用jQuery验证表单？

我试图找到其他问题的答案，但实际上没有任何工作 - .-不知何故，我讨厌JavaScript ......无论如何！我的代码如下所示：如何使用jQuery验证表单？

function validate() 
{ 
if ($(":input").length == 0) 
{ 
    $(":input").addClass("notvalid"); 
    return false; 
} 
else 
{ 
    $(":input").removeClass("notvalid"); 
    return true; 
} 

return true; 
} 

$(":input").blur(validate()); 
$(":input").keyup(validate()); 

$("#customForm").submit(function(){ 
if(validate()){ 
    return true; 
} 
else 
{ 
    return false; 
} 
});

我只是想测试每个标记为非空。测试应在焦点丢失或每种按键类型之后进行。当然点击提交按钮后。

它不起作用。 Firefox的错误控制台说：类似未知的伪类或伪元素“输入”。这是什么意思？

来源

2010-05-25 Andre

如果您更熟悉PHP等服务器端脚本，则可以使用AJAX验证您的字段。

回到这里的JS什么，我认为你要做到：

$("input:text").bind("blur, keyup", function(){ 
    if($(this).val().length > 0){ 
    //Valid not empty 
    $(this).removeClass("notvalid");  
    }else{ 
    //invalid empty 
    $(this).addClass("notvalid"); 
    } 
}); 

$("#customForm").submit(function(){ 
    $("input:text").keyup(); //triggers the keyup event on input fields 
         //which then validates your fields according the 
         //code above. 

    if($("form .notvalid").length > 0){ 
    //You got some invalid fields in form 

    return false; 
    }else{ 
    //All fields are valid continue 

    return true; 
    }

}）;

它可能看起来与你的方法完全不同，但如果你想学习jQuery，最好熟悉它。我评论了一些过程，但如果您对以上代码中使用的方法或函数有任何疑问，那么您只需将它谷歌即可。祝你好运！

来源

2010-05-25 06:45:15 Pablo

错误表示jQuery不知道用:input选择哪些元素。只需在您的选择器中替换:input而不是input:text。你也可以看看jquery.validate插件，这将简化你的验证逻辑。有很多demos on the site应该帮助你开始。

UPDATE：

我的错。根据文档，有:input选择器。

来源

2010-05-25 06:22:43

我认为jquery.com上的jquery文档是正确的。我试过了，现在'文字'这个词不被识别...... – Andre 2010-05-25 06:24:46

@vlad，是的，你是对的，我的错误。 – 2010-05-25 06:27:43

相反的：

function validate() 
{ 
if ($(":input").length == 0) 
{ 
    $(":input").addClass("notvalid"); 
    return false; 
} 
else 
{ 
    $(":input").removeClass("notvalid"); 
    return true; 
} 

return true; 
}

用途：

function validate() 
{ 

$(":input").each(function(){ 
    if ($(this).val() === '') 
    { 
    $(this).addClass("notvalid"); 
    return false; 
    } 
    else 
    { 
    $(this).removeClass("notvalid"); 
    return true; 
    } 
}); 

return true; 
}

来源

2010-05-25 06:25:19 Sarfraz

好多了，谢谢。有趣的是，简单地'输入'不会在控制台中发生任何错误。无论如何！现在他在jquery本身有一些问题。一些元素'd'没有被定义或者是...... – Andre 2010-05-25 06:27:58

如果您使用jQuery已经应该要使用jquery.validate插件像达林说。

这将使您的代码更清洁，更容易添加标准验证规则，如有效的电子邮件，网址，最短长度，最大长度等。此外，无需为您添加和删除类。

来源

2010-05-25 06:32:26 Daveo

如何使用jQuery验证表单？

回答

相关问题