首页 > 微信应用  > 

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

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; // 验证用户名 $(&#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> </head><body> <form action=&#39;do.php&#39; method=&#39;post&#39; > 用 户 名:<input type="text" name="username"> <span class=&#39;state1&#39;>请输入用户名</span><br/><br/> 密　　码:<input type="password" name="password"> <span class=&#39;state1&#39;>请输入密码</span><br/><br/> 确认密码:<input type="password" name="repass"> <span class=&#39;state1&#39;>请输入确认密码</span><br/><br/> 邮　　箱:<input type="text" name="email"> <span class=&#39;state1&#39;>请输入邮箱</span><br/><br/> <a href="javascript:;" rel="external nofollow" ><img class=&#39;submit&#39; type=&#39;image&#39; src=&#39;./images/reg.gif&#39; / alt="jQuery实现所有验证通过方可提交的表单实例讲解" ></a></form></body></html>

jQuery实现所有验证通过方可提交的表单实例讲解由讯客互联微信应用栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“jQuery实现所有验证通过方可提交的表单实例讲解”

推荐文章