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 alt="jQuery实现所有验证通过方可提交的表单实例讲解" 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>相关推荐：
JS基于正则表达式实现的密码强度验证功能示例_javascript技巧
Vue和Flask实现简单的登录验证跳转
JS实现的简单表单验证功能示例以上就是jQuery实现所有验证通过方可提交的表单实例讲解的详细内容，更多请关注小潘博客其它相关文章！
