jQuery实现所有验证通过方可提交的表单实例讲解

   <meta>  <title>Reg</title>  <style>   .state1{    color:#aaa;   }   .state2{    color:#000;   }   .state3{    color:red;   }   .state4{    color:green;   }  </style>  <script></script>  <script>   $(function(){     var ok1=false;    var ok2=false;    var ok3=false;    var ok4=false;    // 验证用户名    $(&#39;input[name="username"]&#39;).focus(function(){     $(this).next().text(&#39;用户名应该为3-20位之间&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state2&#39;);    }).blur(function(){     if($(this).val().length >= 3 && $(this).val().length <=12 && $(this).val()!=&#39;&#39;){      $(this).next().text(&#39;输入成功&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state4&#39;);      ok1=true;     }else{      $(this).next().text(&#39;用户名应该为3-20位之间&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state3&#39;);     }          });     //验证密码    $(&#39;input[name="password"]&#39;).focus(function(){     $(this).next().text(&#39;密码应该为6-20位之间&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state2&#39;);    }).blur(function(){     if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=&#39;&#39;){      $(this).next().text(&#39;输入成功&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state4&#39;);      ok2=true;     }else{      $(this).next().text(&#39;密码应该为6-20位之间&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state3&#39;);     }          });     //验证确认密码     $(&#39;input[name="repass"]&#39;).focus(function(){     $(this).next().text(&#39;输入的确认密码要和上面的密码一致,规则也要相同&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state2&#39;);    }).blur(function(){     if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=&#39;&#39; && $(this).val() == $(&#39;input[name="password"]&#39;).val()){      $(this).next().text(&#39;输入成功&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state4&#39;);      ok3=true;     }else{      $(this).next().text(&#39;输入的确认密码要和上面的密码一致,规则也要相同&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state3&#39;);     }          });     //验证邮箱    $(&#39;input[name="email"]&#39;).focus(function(){     $(this).next().text(&#39;请输入正确的EMAIL格式&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state2&#39;);    }).blur(function(){     if($(this).val().search(/w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*/)==-1){      $(this).next().text(&#39;请输入正确的EMAIL格式&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state3&#39;);     }else{           $(this).next().text(&#39;输入成功&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state4&#39;);      ok4=true;     }          });     //提交按钮,所有验证通过方可提交     $(&#39;.submit&#39;).click(function(){     if(ok1 && ok2 && ok3 && ok4){      $(&#39;form&#39;).submit();     }else{      return false;     }    });        });  </script>