javascript - 如何使用 jQuery 验证表单？

Question

我试图在其他问题中找到答案，但实际上没有任何效果 -.- 不知怎的，我讨厌 JavaScript ...无论如何!我的代码如下所示:

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 错误控制台显示如下内容:未知伪类或伪元素“输入”。这是什么意思？

Answer 1

如果您更熟悉 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 最好熟悉它。我评论了一些过程，但是如果你对上面代码中使用的方法或函数有任何疑问，你只需谷歌一下即可。祝你好运!