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-data的三种用法
Apr 18 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
JQuery animate动画应用示例
May 14 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jquery css实现流程进度条
Mar 26 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基于mcrypt的加密解密实例
2014/10/27 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
Eval and new funciton not the same thing
2012/12/27 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
2013/01/08 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
python中set常用操作汇总
2016/06/30 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
Python函数中的可变长参数详解
2019/09/12 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
体育教育毕业生自荐信
2013/11/21 职场文书
自我评价正确写法范文
2013/12/10 职场文书
前台接待岗位职责
2015/02/03 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书