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 封装 Ajax 常用方法(推荐)
May 21 jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
使用jquery实现轮播图效果
Jan 02 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中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
php foreach、while性能比较
2009/10/15 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
Angular 2.0+ 的数据绑定的实现示例
2017/08/09 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
python3抓取中文网页的方法
2015/07/28 Python
Python3.6简单操作Mysql数据库
2017/09/12 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
django加载本地html的方法
2018/05/27 Python
Python登录注册验证功能实现
2018/06/18 Python
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
python进行TCP端口扫描的实现
2018/12/21 Python
django迁移数据库错误问题解决
2019/07/29 Python
python 实现目录复制的三种小结
2019/12/04 Python
python下对hsv颜色空间进行量化操作
2020/06/04 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
经贸专业毕业生求职信范文
2014/05/01 职场文书
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸