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加密密码到cookie的实现代码
Apr 18 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 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实现上传图片生成缩略图示例
2014/04/13 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
Yii框架应用组件用法实例分析
2020/05/15 PHP
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
小型js框架veryide.librar源代码
2009/03/05 Javascript
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
python正则表达式爬取猫眼电影top100
2018/02/24 Python
儿童学习python的一些小技巧
2018/05/27 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
德国户外商店:eXXpozed
2020/07/25 全球购物
《长城和运河》教学反思
2014/04/14 职场文书
销售队伍口号
2014/06/11 职场文书
毕业证代领委托书
2014/09/26 职场文书
租车协议书
2015/01/27 职场文书
火烧圆明园观后感
2015/06/03 职场文书
一年级语文教学随笔
2015/08/14 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书