<!-- 账号登录块 -->
       <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}
 }

表单 用jquery做输入脱离焦点 进行正则验证的更多相关文章

  1. 在表单提交之前做校验-利用jQuery的submit方法

    点击表单中的提交按钮,默认就会提交表单,如果要在表单提交之前做一些校验,那么就可以用jQuery的submit方法. 也就是jQuery的submit的方法执行顺序,在表单的提交之前.用法如下: $( ...

  2. Web开发——HTML基础(HTML表单/下拉列表/多行输入)

    参考: 参考:http://www.w3school.com.cn/html/html_forms.asp 目录: 1.<form> 元素 1.1 <input> 元素(输入属 ...

  3. 15 款优化表单的 jQuery 插件

    网页上的表单提供给用户的一种交互的方式,用户输入数据,提交到服务器,等待后续的处理.这些表单在我们浏览的网页中随处可见,也容易被我们忽略. 比如,“联系我们”页面会提供一个表单给用户填写他们的信息和想 ...

  4. Form表单利用Jquery Validate验证以及ajax提交

    #表单利用Jquery验证验证以及ajax提交 概述>详细讲解表单利用Jquery >验证验证以及ajax提交的过程,以及Validate的自定义提示语,非空判断,输入字段的远程ajax验 ...

  5. Jquery easyui 重置按钮,easyui 清空表单,Jquery easyui 重置表单

    Jquery easyui 重置按钮,easyui 清空表单,Jquery easyui 重置表单 >>>>>>>>>>>>&g ...

  6. ios手机弹出层上表单的操作,收起键盘焦点错乱的问题

    今天遇到了ios手机下 弹出层上form表单 当收起键盘后,焦点错乱,无法再操作的问题 解决办法 function device() { const u = navigator.userAgent; ...

  7. 让input表单输入框不记录输入过信息的方法

    有过表单设计经验的朋友肯定知道,当我们在浏览器中输入表单信息的时候,往往input文本输入框会记录下之前提交表单的信息,以后每次只要双击input文本输入框就会出现之前输入的文本,这样有时会觉得比较方 ...

  8. spring mvc表单的展现、输入处理、校验的实现

    之前已经实现了spring mvc的入门例子及如何处理带参数的请求Controller编写.本文主要记录: 1)重定向请求 2)处理路径中含有变量的请求 3)使用JSR-303进行校验 ① 首先,编写 ...

  9. Jquery validate验证表单时多个name相同的元素只验证第一个的问题

    下面搜集了五种方法,主要还是前两个提供了解决方案,第三种需要修改jQuery源码: 修复jquery.validate插件中name属性相同(如name='a[]')时验证的bug 使用jquery. ...

随机推荐

  1. python全栈开放实践第三版第一章的练习题完成情况

    练习题: 1.简述编译型与解释型语言的区别,且分别列出你知道哪些语言属于编译型,哪些数以解释型.1 编译型:只须编译一次就可以把源代码编译成机器语言,后面的执行无须重新编译,直接使用之前的编译结果就可 ...

  2. 配置 jaco机械臂 ros环境

    ---恢复内容开始--- 终于有机械臂了, 首先先下载包 cd ~/catkin_ws/src git clone https://github.com/Kinovarobotics/kinova-r ...

  3. docker Dockerfile学习---构建redis环境

    1.创建项目目录并下载包及文件 mkdir centos_redis cd centos_redis wget http://download.redis.io/releases/redis-5.0. ...

  4. thinkphp读取配置

    无论何种配置文件,定义了配置文件之后,都统一使用系统提供的C方法(可以借助Config单词来帮助记忆)来读取已有的配置. 获取已经设置的参数值:C('参数名称') 例如, $model = C('UR ...

  5. CF540D Bad Luck Island(期望dp)

    传送门 解题思路 比较容易的一道期望\(dp\),设\(f[i][j][k]\)表示石头\(i\)个,剪刀\(j\)个,步子\(l\)个.然后转移的时候用组合数算一下就好了. 代码 #include& ...

  6. (转)RSA加密解密及数字签名Java实现

    转:http://my.oschina.net/jiangli0502/blog/171263?fromerr=hc4izFe2  RSA公钥加密算法是1977年由罗纳德·李维斯特(Ron Rives ...

  7. Codeforces768B-Code For 1-类似线段树-枚举+单点更新or区间更新

    目录 Catalog Solution: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 Catalog Problem:Portal传送门  原题目描述在最下面.  每次把\(n\ ...

  8. Python3 From Zero——{最初的意识:000~Initial consciousness}

    http://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000 a.编码 默认情况下,Python ...

  9. k8s 映射 外部服务

    把外部的服务,通过创建service和endpoint,把它映射到k8s内部来使用. 操作步骤: 在10.0.0.13上安装数据库 yum install mariadb-server -y syst ...

  10. python实现一个简单木马!

    一个简单的木马程序 绝大多数的木马程序都是基于Socket来实现的 废话少说直接上代码! 代码: client部分: # -*- coding: UTF-8 -*- import socketimpo ...