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 >
相关推荐：
JS基于正则表达式实现的密码强度验证功能示例_javascript技巧
Vue和Flask实现简单的登录验证跳转
JS实现的简单表单验证功能示例
以上就是jQuery实现所有验证通过方可提交的表单实例讲解的详细内容，更多请关注php中文网其它相关文章！
 
  
 最佳 Windows 性能的顶级免费优化软件
 
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。