基于Jquery实现表单验证
有时在我们注册账户、登陆系统时,当所有验证通过方可提交这就需要Jquery来实现表单验证,今天分享给小伙伴们一段基于Jquery实现表单验证的代码。
<html> <head> <metahttp-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> <scriptsrc="jquery.js"></script> <script> $(function(){ varok1=false; varok2=false; varok3=false; varok4=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{ returnfalse; } }); }); </script> </head> <body> <formaction='do.php'method='post'> 用户名:<inputtype="text"name="username"> <spanclass='state1'>请输入用户名</span><br/><br/> 密码:<inputtype="password"name="password"> <spanclass='state1'>请输入密码</span><br/><br/> 确认密码:<inputtype="password"name="repass"> <spanclass='state1'>请输入确认密码</span><br/><br/> 邮箱:<inputtype="text"name="email"> <spanclass='state1'>请输入邮箱</span><br/><br/> <ahref="javascript:;"><imgclass='submit'type='image'src='./images/reg.gif'/></a> </form> </body> </html>
以上就是本文的全部内容,希望大家可以喜欢。