表单 用jquery做输入脱离焦点 进行正则验证

Posted 2020-11-26 zqy6666

 

<!-- 账号登录块 -->
       <form class="form1" action="" method="get" onsubmit="return sub();">
        <label></label>
        <input class="user-name user" type="text" placeholder="邮箱/手机号码/小米ID">
        <input class="user-name mima" type="password" name="" id="" value="" placeholder="密码">
        <div class="clear"></div>
        <p class="alert at1">
         <span>!</span>
         账号格式不正确
        </p>
        <p class="alert at2">
         <span>!</span>
         密码格式不正确
        </p>
        <input class="loading" type="submit" id="" name="" value="登录" />
       </form>
       <!-- 手机短信登录注册快 -->
       <form class="form2" action="" method="get">
        <label class="lb1">+86</label>
        <input class="user-name phone" type="text" placeholder="手机号码">
        <input class="user-name yzm" type="password" name="" id="" value="" placeholder="短信验证码"><label class="lb2">获取验证码</label>
        <div class="clear"></div>
        <p class="alert at3">
         <span>!</span>
         手机号格式不正确
        </p>
        <p class="alert at4">
         <span>!</span>
         短信验证码不正确
        </p>
        <input class="loading" type="submit" id="" name="" value="立即登录/注册" />
       </form>

// 用户名验证
   $(".user").focus(function(){
      $(".user").css("background-color","#FFFFCC");
    });
   $(".alert").hide();
   
    $(".user").blur(function(){
   var n = $(".user").eq(0).val();
   
   if(!isMobil(n)){
    if(!isMail(n))
    {
     if (!isTrueName(n)) {
      $(".at1").show();
      $(".user").eq(0).css("border-color","red");
     } else{
      $(".alert").hide();
      $(".user").eq(0).css("border-color"," #ABADB3");
     }
    }else{
     $(".alert").hide();
     $(".user").eq(0).css("border-color"," #ABADB3");
    }
   }else{
     $(".alert").hide();
     $(".user").eq(0).css("border-color"," #ABADB3");
    }
    });
  
  // 密码验证
  $(".mima").focus(function(){
     $(".mima").css("background-color","#FFFFCC");
   });
     $(".alert").hide();
     
   $(".mima").blur(function(){
     var m = $(".mima").eq(0).val();
     if(!isPasswd(m)){
      $(".at2").show();
      $(".mima").eq(0).css("border-color","red");
     }else{
      $(".alert").hide();
      $(".mima").eq(0).css("border-color"," #ABADB3");
     }
      
   });
   //手机格式验证
  $(".phone").focus(function(){
     $(".phone").css("background-color","#FFFFCC");
   });
     $(".alert").hide();
     
   $(".phone").blur(function(){
     var p = $(".phone").eq(0).val();
     if(!isMobil(p)){
        $(".at3").show();
        $(".phone").eq(0).css("border-color","red");
     }else{
       $(".alert").hide();
       $(".phone").eq(0).css("border-color"," #ABADB3");
      }
   });
  //验证码
  $(".yzm").focus(function(){
     $(".yzm").css("background-color","#FFFFCC");
   });
     $(".alert").hide();
     
   $(".yzm").blur(function(){
     var y = $(".yzm").eq(0).val();
     if(!isyzm(y)){
        $(".at4").show();
        $(".yzm").eq(0).css("border-color","red");
     }else{
       $(".alert").hide();
       $(".yzm").eq(0).css("border-color"," #ABADB3");
      }
   });
  });
 
 验证函数
 /* 校验手机号 */
 function isMobil(s)
 {
 var patrn=/^1(3|4|5|7|8)d{9}$/;
 if (!patrn.exec(s)) {return false}
 else{return true}
 }
 /*邮箱验证*/
 function isMail(s)
 {
 var patrn=/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
 if (!patrn.exec(s)) {return false}
 else{return true}
 }
 
 /* 校验用户名 */
 function isTrueName(s)
 {
 var patrn=/^[a-zA-Z]{4,8}$/;
 if (!patrn.exec(s)) {return false}
 else{return true}
 }
 
 //校验密码：只能输入6-20个字母、数字、下划线
 function isPasswd(s)
 {
 var patrn=/^(w){6,20}$/;
 if (!patrn.exec(s)) {return false}
 else{return true}
 }
 
 /* 校验手机号 */
 function isyzm(s)
 {
 var patrn=/^d{5}$/;
 if (!patrn.exec(s)) {return false}
 else{return true}
 }