jquery表单验证

来源:互联网 发布:晚上忍不住吃东西知乎 编辑:程序博客网 时间:2024/06/17 03:08

HTML表单:

<form name="pad_form" id="pad_form" action="http://www.tpyx.cn/Accountspromotion/adv_do_register" method="post"  >
 
   <table style="text-align:left; width:500px">
   <tr>   
   <td width="100"><label>用户名:</td>   
   <td width="150"></label><input type="text" id="code"  name="username" size="20" /></td>
   <td><span id="code_notice" style="color:red; font-size:12px;"></span></td>
   </tr>
   
   <tr>
   <td><label>登录密码:</label></td>
   <td width="150"><input type="password" id="password" name="password" size="20"  /></td>
   <td><span id="password_notice"></span></td>
   </tr>
   
   <tr>
   <td><label>重复密码:</label></td>
   <td width="150"><input type="password" id="password2" name="password2" size="20" /></td>
   <td><span id="password2_notice"></span></td>
   </tr>
   
   <tr>
   <td><label>服务器:</label></td>
   <td width="150"><select id="re_server_id" name="sid"></select></td>
   <td><span id="re_server_id_notice"></span></td>
   </tr>
   
   <tr>
   <td colspan="3" style=" padding-left:50px; padding-top:20px;"><input type="submit" id="submit" value=" " class="formsubmit" /></td>
   </tr>
   </table>

Jquery验证:

第一种验证:

<!--再次人性化jquery验证-->

<script type="text/javascript">
$(document).ready(function() {

//用户名验证
   $("#code").focus(function(){
   $("#code_notice").html("<font style='color:white;'>请输入5-21个字符</font>");
   }
   )   
   $("#code").blur(function(){
     if($("#code").val()==""||$("#code").val()==null){
  $("#code_notice").html("<font style='color:red;'>*大侠,请留下您的尊姓大名。</font>");
  $("#submit").attr("disabled","false");
  }
else if($("#code").val().length>21||$("#code").val().length<5){
  $("#code_notice").html("<font style='color:red;'>  * 注意是5-21个字符</font>");
  $("#submit").attr("disabled","false");
 }
else{
$("#code_notice").html("")
  //$("#code_notice").html("<font style='color:green;'>恭喜你,战神录上有名!</font>")
  }
})
   
   //登录密码验证
   $("#password").blur(function(){
  if($("#password").val()==""||$("#password").val()==null){
  $("#password_notice").html("<font style='color:red; font-size:12px;'>    * 你还没有留下密码</font>");
 // $("#password").focus();
$("#submit").attr("disabled","false");
  }else{
   $("#password_notice").html("");}  
  })
  
   //重复密码验证
   $("#password2").blur(function(){
     if($("#password2").val()!=$("#password").val()){
        $("#password2_notice").html("<font style='color:red; font-size:12px;'>    * 两次密码不一致</font>");
        //$("#password2").focus();  
$("#submit").attr("disabled","false");
   }else{
  $("#password2_notice").html("");}
   
})




//服务器验证


$("#submit").mousedown(function(){
sid=$("#re_server_id").get(0).selectedIndex;
if(sid=="-1"){
$("#re_server_id_notice").html("<font style='color:red; font-size:12px;'>    * 请你选择服务器</font>");
//$("#submit").bind("click",function(){this.disable=true;});
$("#submit").attr("disabled","false");
}
})


})
</script>


<!--end of再次人性化jquery验证-->




第二中验证方法:

pad_form.submit(function(){
        var username=$('#code'),
        sid=$('#re_server_id').get(0).selectedIndex,
            pwd=$('#password'),
            password2=$('#password2');
        if(username.val()==""||username.val()==null){
            alert('请填写用户名');
            return false;
        }
        if(pwd.val()==""||pwd.val()==null){
            alert('请填写密码');
            password.focus();
            return false;
        }
        if(password2.val()==""||password2.val()==null){
            alert('请填写重复密码');
password2.focus();
            return false;
        }
        if(password2.val()!=pwd.val()){
        alert('两次密码不一致');
        password.focus();
            return false;
        }
if(sid=="-1"){
          alert('请选择服务器');
          return false;
         }
    })

0 0
原创粉丝点击