码迷,mamicode.com
首页 > 其他好文 > 详细

页面简单验证

时间:2017-11-21 14:53:43      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:name   http   find   har   his   app   com   char   src   

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <title>会员注册</title>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
 </head>
 <body>
  <!--最外部大盒子-->
  <div class="scdl_layout">
   <!--头部-->
   <header class="scdl_header">
    <span>会员注册</span>
   </header>
   <section class="scdl_main">
    <!--注册信息填写-->
    <div class="sczc_shuju">
     <div class="phonenuber">
      <input type="text" name="UserName" class="mobile infotext"  placeholder="11位手机号码"/>
     </div>
     <div class="phoneyzm">
      <input type="text" name="code" id="" class="code infotext" placeholder="验证码"/>
      <input type="button" class="hqyzm" name="" id="" value="获取验证" style="font-size: 14px;font-family: ‘microsoft yahei‘;color: #fff;-webkit-appearance: none;"" />
     </div>
     <div class="firpswd">
      <input type="password" name="password"  class="password infotext" placeholder="新密码"/>
     </div>
     <div class="secpswd">
      <input type="password" name="confirmpassword"  class="confirmpassword infotext" placeholder="确认密码"/>
     </div>
     <a href="javascript:;" class="sure_zc_btn">确认注册</a>
    </div>   
   </section>
  </div>
 </body>
</html>
<script type="text/javascript">
  $("input.infotext").blur(function(){
   var $parent = $(this).parent();
   $parent.find(".formtips").remove();
   var passnum = $(".password").val();
   var phonenum = /^(13[0-9]{9}|15[012356789][0-9]{8}|18[0256789][0-9]{8}|147[0-9]{8})?$/;
   if($(this).is(".mobile")){
    if(this.value == ""){
     $parent.append("<p class=‘formtips‘>电话号码不能为空!!</p>");
     return false;
    }else if(!phonenum.test(this.value)){
     $parent.append("<p class=‘formtips‘>电话号码格式不正确!!</p>"); 
     return false;
    }else{
     return true;
    }
   }
   
   if($(this).is(".code")){
    if(this.value == ""){
     $parent.append("<p class=‘formtips‘>验证码不能为空!!</p>");
     return false;
    }else{
     return true;
    }
   }
  
   
   if($(this).is(".password")){
    if(this.value == ""){
     $parent.append("<p class=‘formtips‘>请输入密码!!</p>");  
     return false;
    }else if(this.value.length<6){
     $parent.append("<p class=‘formtips‘>密码不能少于6位!!</p>");     
     return false;
    }else{
     return true;
    }
   }
   
   if($(this).is(".confirmpassword")){
    if(this.value == ""){
     $parent.append("<p class=‘formtips‘>请再次输入您的密码!!</p>"); 
     return false;
    }else if(this.value != passnum){
     $parent.append("<p class=‘formtips‘>俩次输入的密码不同!!</p>"); 
     return false;     
    }else{
     return true;
    }
   }
  }).focus(function(){
   var $parent = $(this).parent();
   $parent.find(".formtips").remove();   
  })
  
  
  $(".sure_zc_btn").click(function(){
   $("input.infotext").blur();
  })
    </script>

页面简单验证

标签:name   http   find   har   his   app   com   char   src   

原文地址:http://www.cnblogs.com/neishang1/p/7872475.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!