jQuery正则验证注册页面经典实例


Posted in jQuery onJune 10, 2017

本文实例讲述了jQuery正则验证注册页面功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>正则验证注册页面</title>
  <style type="text/css">
    .red{
      color:#cc0000;
      font-weight:bold;
    }
  </style>
  <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
  <script language="JavaScript">
    function $(elementId){
      return document.getElementById(elementId).value;
    }
    function divId(elementId){
      return document.getElementById(elementId);
    }
//    用户名验证
    function checkUser(){
      var user = $("user");
      var userId = divId("user_prompt");
      userId.innerHTML="";
      var reg=/^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
      if(reg.test(user)==false){
          userId.innerHTML="用户名不正确";
        return false;
      }
      return true;
    }
//    password check
    function checkPwd(){
      var pwd = $("pwd");
      var pwdId = divId("pwd_prompt");
       pwdId.innerHTML="";
      var reg = /^[a-zA-Z0-9]{4,10}$/;
      if(reg.test(pwd)==false){
        pwdId.innerHTML = "密码不能含有非法字符,长度在4-10之间";
        return false;
      }
      return true;
    }
     function checkRepwd(){
       var repwd = $("repwd");
       var pwd = $("pwd");
       var repwdId = divId("repwd_prompt");
        repwdId.innerHTML=""
       if(pwd!=repwd){
         repwdId.innerHTML="两次密码不一致";
         return false;
       }
       return true;
     }
//   邮箱验证
    function checkEmail(){
      var email = $("email");
      var email_prompt = divId("email_prompt");
      email_prompt.innerHTML="";
      var reg = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
       if(reg.test(email)==false){
         email_prompt.innerHTML="Email格式不对,请输入正确email";
         return false;
       }
      return true;
    }
//      手机号验证
    function checkMobile() {
      var mobile = $("mobile");
      var mobileId = divId("mobile_prompt");
      mobileId.innerHTML="";
      var reMobile = /^1\d{10}$/;
       if (reMobile.test(mobile)==false){
         mobileId.innerHTML="手机号输入有误";
         return false;
       }
      return true;
    }
//    生日验证
    function checkBirth(){
      var birth = $("birth");
      var birthId = divId("birth_prompt");
      birthId.innerHTML="";
      var reg = /^((19\d{2})|(200\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/;
      if(reg.test(birth)==false){
        birthId.innerHTML="生日格式不对";
        return false;
      }
      return true;
    }
  </script>
</head>
<body>
<table class="main" border="0" callpadding="0" cellspacing="0">
  <tr>
    <td><img src="images/logo.jpg" alt="logo"><img src="images/banner.jpg" alt="banner"></td>
  </tr>
  <tr>
    <td class="hr_1">新用户注册</td>
  </tr>
  <tr>
    <td style="height: 10px;"></td>
  </tr>
    <form action="" method="post" name="myform">
  <tr>
     <td><table>
       <tr>
         <td class="left">用户名:</td>
         <td class="center"><input type="text" id="user" class="in" onblur="checkUser()"></td>
         <td><div id="user_prompt">用户名由英文字母和数字组成-4到16位字符,以字母开头</div></td>
       </tr>
       <tr>
         <td class="left">密码:</td>
         <td class="center"><input type="password" id="pwd" class="in" onblur="checkPwd()"></td>
         <td><div id="pwd_prompt">密码由英文字母和数字组成的4-10位字符</div></td>
       </tr>
       <tr>
         <td class="left">确认密码:</td>
         <td class="center"><input type="password" id="repwd" class="in" onblur="checkRepwd()"></td>
         <td><div id="repwd_prompt"></div></td>
       </tr>
       <tr>
         <td class="left">电子邮箱:</td>
         <td class="center"><input type="text" id="email" class="in" onblur="checkEmail()"></td>
         <td><div id="email_prompt"></div></td>
       </tr>
       <tr>
         <td class="left">手机号码:</td>
         <td class="center"><input type="text" id="mobile" class="in" onblur="checkMobile()"></td>
         <td><div id="mobile_prompt"></div></td>
       </tr>
       <tr>
         <td class="left">生日:</td>
         <td class="center"><input type="text " id="birth" class="in" onblur="checkBirth()"></td>
         <td><div id="birth_prompt"></div></td>
       </tr>
       <tr>
         <td class="left"> </td>
         <td class="center"><input name="" type="image" src="images/register.jpg" /></td>
         <td> </td>
       </tr>
     </table>
     </td>
  </tr>
  </form>
</table>
</body>
</html>
jQuery 相关文章推荐
jQuery中map函数的两种方式
Apr 07 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 #jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 #jQuery
jQuery为某个div加入行样式
Jun 09 #jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 #jQuery
jQuery Validate表单验证插件实现代码
Jun 08 #jQuery
jquery Ajax实现Select动态添加数据
Jun 08 #jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 #jQuery
You might like
详解PHP显示MySQL数据的三种方法
2008/06/05 PHP
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
PHP 金额数字转换成英文
2010/05/06 PHP
ThinkPHP中的关联模型注意点
2014/06/16 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
Jquery 绑定时间实现代码
2011/05/03 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
JavaScript文件的同步和异步加载的实现代码
2017/08/19 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
python Pandas 读取txt表格的实例
2018/04/29 Python
Python中xml和json格式相互转换操作示例
2018/12/05 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
Python列表(List)知识点总结
2019/02/18 Python
Python逐行读取文件中内容的简单方法
2019/02/26 Python
详解python算法之冒泡排序
2019/03/05 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
python numpy 反转 reverse示例
2019/12/04 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
本科生求职简历的自我评价
2013/10/21 职场文书
考试作弊检讨书大全
2014/02/18 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
好的促销活动方案
2014/08/21 职场文书