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 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jQuery插件实现图片轮播效果
Oct 19 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 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
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
javascript 写类方式之八
2009/07/05 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
Vuex提升学习篇
2018/01/11 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
基于python 处理中文路径的终极解决方法
2018/04/12 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
东方红海科技面试题软件测试方面
2012/02/08 面试题
自荐信范文
2013/12/10 职场文书
班级入场式解说词
2014/02/01 职场文书
小学教师听课制度
2014/02/01 职场文书
园艺师求职信
2014/03/10 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
黄埔军校观后感
2015/06/10 职场文书
vue封装数字翻牌器
2022/04/20 Vue.js
关于的python五子棋的算法
2022/05/02 Python