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

来源：懂视网责编：小OO 时间：2020-11-27 22:25:17

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>；<；}})。

推荐度：

点击下载本文 文档为doc格式

导读本文实例为大家分享了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>；<；}})。

本文实例为大家分享了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:;" rel="external nofollow" ><img class='submit' type='image' src='./images/reg.gif' /></a>
</form>
</body>
</html>

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

推荐度：

点击下载本文 文档为doc格式

标签：验证通过 form jquery实现表单验证

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐