基于Jquery实现表单验证

有时在我们注册账户、登陆系统时，当所有验证通过方可提交这就需要Jquery来实现表单验证，今天分享给小伙伴们一段基于Jquery实现表单验证的代码。
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>Reg</title><style>.state1{color:#aaa;}.state2{color:#000;}.state3{color:red;}.state4{color:green;}</style><script src="jquery.js"></script><script>$（function（）{ var ok1=false;var ok2=false;var ok3=false;var ok4=false;// 验证用户名$（"input[name="username"]"）.focus（function（）{$（this）.next（）.text（"用户名应该为3-20位之间"）.removeClass（"state1"）.addClass（"state2"）;}）.blur（function（）{if（$（this）.val（）.length >= 3 && $（this）.val（）.length <=12 && $（this）.val（）！=""）{$（this）.next（）.text（"输入成功"）.removeClass（"state1"）.addClass（"state4"）;ok1=true;}else{$（this）.next（）.text（"用户名应该为3-20位之间"）.removeClass（"state1"）.addClass（"state3"）;} }）; //验证密码$（"input[name="password"]"）.focus（function（）{$（this）.next（）.text（"密码应该为6-20位之间"）.removeClass（"state1"）.addClass（"state2"）;}）.blur（function（）{if（$（this）.val（）.length >= 6 && $（this）.val（）.length <=20 && $（this）.val（）！=""）{$（this）.next（）.text（"输入成功"）.removeClass（"state1"）.addClass（"state4"）;ok2=true;}else{$（this）.next（）.text（"密码应该为6-20位之间"）.removeClass（"state1"）.addClass（"state3"）;} }）; //验证确认密码$（"input[name="repass"]"）.focus（function（）{$（this）.next（）.text（"输入的确认密码要和上面的密码一致,规则也要相同"）.removeClass（"state1"）.addClass（"state2"）;}）.blur（function（）{if（$（this）.val（）.length >= 6 && $（this）.val（）.length <=20 && $（this）.val（）！="" && $（this）.val（） == $（"input[name="password"]"）.val（））{$（this）.next（）.text（"输入成功"）.removeClass（"state1"）.addClass（"state4"）;ok3=true;}else{$（this）.next（）.text（"输入的确认密码要和上面的密码一致,规则也要相同"）.removeClass（"state1"）.addClass（"state3"）;} }）; //验证邮箱$（"input[name="email"]"）.focus（function（）{$（this）.next（）.text（"请输入正确的EMAIL格式"）.removeClass（"state1"）.addClass（"state2"）;}）.blur（function（）{if（$（this）.val（）.search（/w+（[-+.]w+）*@w+（[-.]w+）*.w+（[-.]w+）*/）==-1）{$（this）.next（）.text（"请输入正确的EMAIL格式"）.removeClass（"state1"）.addClass（"state3"）;}else{ $（this）.next（）.text（"输入成功"）.removeClass（"state1"）.addClass（"state4"）;ok4=true;} }）; //提交按钮,所有验证通过方可提交 $（".submit"）.click（function（）{if（ok1 && ok2 && ok3 && ok4）{$（"form"）.submit（）;}else{return false;}}）; }）;</script></head><body> <form action="do.php" method="post" >用 户 名:<input type="text" name="username"><span class="state1">请输入用户名</span><br/><br/>密  码:<input type="password" name="password"><span class="state1">请输入密码</span><br/><br/>确认密码:<input type="password" name="repass"><span class="state1">请输入确认密码</span><br/><br/>邮  箱:<input type="text" name="email"><span class="state1">请输入邮箱</span><br/><br/> <a href="javascript:;"><img class="submit" type="image" src="./images/reg.gif" /></a></form></body></html>
以上就是本文的全部内容，希望大家可以喜欢。