表单的验证



< 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:;" >< img class = 'submit' type = 'image' src = './images/reg.gif' /></ a > </ form > </ body > </ html >

 以上就是本文的全部内容，希望大家可以喜欢。

您可能感兴趣的文章:

• jQuery EasyUI提交表单验证
• jquery实现一个简单的表单验证实例
• jQuery Validate表单验证插件 添加class属性形式的校验
• Jquery插件easyUi实现表单验证示例
• jquery实现表单验证简单实例演示
• jquery实现简单的表单验证
• jQuery实现动态表单验证时文本框抖动效果完整实例
• Jquery插件easyUi表单验证提交(示例代码)
• jquery内置验证(validate)使用方法示例(表单验证)
• Jquery 表单验证类介绍与实例
• jquery表单验证使用插件formValidator
• JQuery.validationEngine表单验证插件(推荐)