javascript与正则共同使用验证邮箱,身份证,电话,生日等

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>用户注册</title>
    <style type="text/css">
      body {
        background-color: rgb(177, 208, 224);
        font: normal 12px Trebuchet MS;
        color: #000;
      }

      .roundedCorners {
        width: 350px;
        padding: 10px;
        background: #58bc58;
        box-shadow: 0px 0px 10px 0px #888888;
        border: 1px solid #ddeef6;
        border-radius: 6px;
        margin: auto;
      }

      .roundedCorners-textbox {
        border: 1px solid #999;
        width: 250px;
      }

      .checkbox {
        margin-left: 30px;
        border: 1px solid #999;
        width: 20px;
      }

      .label {
        display: inline-block;
        width: 50px;
        text-align: center;
      }

      .default {
        color: grey;
        font-size: 12px;
      }

      .input {
        color: grey;
        font-size: 12px;
      }
    </style>
  </head>
  

  <body>
    <form id="myform" action="05success.html" method="get">
      <div class="roundedCorners">
        <label class="label">账号</label>
        <input
          id="username"
          name="username"
          type="text"
          placeholder="用户名长度为6-20,禁止特殊字符"
          class="default roundedCorners-textbox"
        />
        <br />
        <br />
        <label class="label">昵称</label>
        <input id="nickname" name="nickname" type="text" class="roundedCorners-textbox" />
        <br />
        <br />
        <label class="label">电子邮件</label>
        <input id="email" name="email" type="text" class="roundedCorners-textbox" />
        <br />
        <br />
        <label class="label">身份证</label>
        <input id="identity" name="identity" type="text" class="roundedCorners-textbox" />
        <br />
        <br />
        <label class="label">手机号码</label>
        <input id="phone" name="phone" type="text" class="roundedCorners-textbox" />
        <br />
        <br />
        <label class="label">生日</label>
        <input id="birthday" name="birthday" type="text" class="roundedCorners-textbox" />
        <br />
        <br />
        <label class="label">密码</label>
        <input id="password" name="password" type="password" class="roundedCorners-textbox" />
        <br />
        <br />
        <label class="label">确认密码</label>
        <input id="confirm_pwd" name="confirm_pwd" type="text" class="roundedCorners-textbox" />
        <br />
        <br />
        <input type="checkbox" class="checkbox" />
        <label>10天内免登陆</label>
        <br />
        <br />

        <input type="submit" id="btnCheck" value="确定" />

        <input type="reset" value="清空" />
      </div>
    </form>
  </body>
</html>

上面是html部分

<script>
  window.onload = function () {
    /*
          表单提交是默认行为
              * preventDefault()
              * returnValue = false;
  
  
          知识点:
              * 正则表达式的方法
                  * reg.test(str):用正则表达式reg验证str是否合法
                  * exec()    等同于 match
  
              * 分组:()
                  * 引用
                      * 正则内引用:\n \1,\2
                      * 正则外引用:$n      $1,$2
              * 非:
                  * ^
                  * [^\d]
              * 表示所有字符:[\s\S],[\w\W],[\d\D]
       */
    var btnCheck = document.getElementById('btnCheck')
    btnCheck.onclick = function (e) {
      /*
            如果以下表单有一个不符合,则不允许提交表单
         */

      e = e || window.event

      /*
        验证账号
            * 不能为空,
            * 不能使用特殊字符(数字、字母、下划线、横杠)开头,
            * 必须以字母开头,
            * 长度6-20
        */
      var username = document.getElementById('username').value
      if (!/^[a-z][\w\-]{5,19}$/.test(username)) {
        alert('您输入的用户名不合法')

        // e.preventDefault();
        // return;
        return false
      }

      //昵称只能输入中文
      var nickname = document.getElementById('nickname').value
      if (!/^[\u2E80-\u9FFF]+$/.test(nickname)) {
        alert('昵称必须为中文')
        return false
      }

      /*
            电子邮件
                jinrong.xie@qq.com
                123@qq.com
                x_x@163.com
                x-x@a-r.com.cn
                x.x@laoxie.com
                邮箱用户名必须3-30个字符
         */
      var email = document.getElementById('email').value
      if (!/^[a-z0-9][\w\-\.]{2,29}@[a-z0-9\-]{2,67}(\.[a-z\u2E80-\u9FFF]{2,6})+$/.test(email)) {
        alert('邮箱格式错误')
        return false
      }

      /*
            身份证
                18/15
                445655 19900707 2165
                445655 19900707 211x
         */
      var identity = document.getElementById('identity').value
      if (!/^(\d{17}|\d{14})[\dx]$/.test(identity)) {
        alert('身份证格式错误')
        return false
      }

      /*
            手机号码
                11位
                158 8888 8888
                1 [34578]
         */
      var phone = document.getElementById('phone').value
      if (!/^1[3-9]\d{9}$/.test(phone)) {
        alert('手机号错误')
        return false
      }

      /*
              生日
                  1999/05/08
                  1999-5-8
                  19990508
                  1999-05/08  不合法
                  199905
  
                  引用分组
                      * 正则内:\n
                      * 正则外:$n
                  分组顺序:以左括号出现的顺序为分组顺序
           */

      var birthday = document.getElementById('birthday').value
      if (!/^\d{4}([\/\-]?)\d{1,2}\1\d{1,2}$/.test(birthday)) {
        alert('生日格式错误')
        return false
      }

      /*
            密码
                长度6-20
                不能包含空格
         */
      var password = document.getElementById('password').value
      if (!/^\S{6,20}$/.test(password)) {
        alert('密码禁止空格')
        return false
      }

      var confirm_pwd = document.getElementById('confirm_pwd').value
      if (confirm_pwd != password) {
        alert('两次输入密码不一致,请你仔细看看')
        return false
      }
    }

    // 根据身份自动写入生日
    document.getElementById('identity').onblur = function () {
      // 445655199007072165
      var res = this.value.match(/\d{6}(\d{8})\d{4}/)
      if (res) {
        res = res[1]
      }
      document.getElementById('birthday').value = res
    }
  }
</script>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错原因 1.9 当前网页调用其他网页 1.10 倒计时载入页面 1.11 定义网页的关键字 1.12 进入页面同时弹出欢迎对话框 1.13 禁止网页另存 1.14 禁止页面加入缓存 1.15 离开页面时弹出对话框 1.16 判断页面是否添加了W3C声明 1.17 屏蔽网页中的脚本 1.18 以频道模式打开页面 1.19 自动识别网页类型 1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用登录按钮 2.3 动态创建按钮 2.3 平面按钮 2.4 按钮的嵌入效果 2.5 按钮改变状态栏信息 2.6 定义按钮的热键 2.7 取得控件的绝对位置 2.8 删除时的确认提 示 2.9 按钮只能单击一次 2.10 防止按钮连击 2.11 图片式按钮 2.12 文字显示在按钮底部 2.13 选择不同的列表项就显示不同的按钮 2.14 使用按钮控制文本渐变 2.15 翻页效果的公告栏 2.16 动态设置控件的事件 第3章 字符串文本和输入框特效 3.1 只带下划线的输入框 3.2 限定文本框可输入字符数 3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首字母变为大写 3.6 textarea自适应文字行数 3.7 禁止文本框的拷贝和粘贴 3.8 控制两个文本框只输其一 3.9 判断编辑器中是否包含特殊字符 3.10 判断文本中回车的数量 3.11 判断字符串中有多少汉字 3.12 去除字符串的前后空格 3.13 刷新时清空所有文本框 3.14 随意改变大小的文本框 3.15 文本框的自动全选 3.16 文本框滚动导航 3.17 按钮获取焦点 3.18 文本框获取焦点弹出下拉框 3.19 文本框简单的单击效果 3.20 文字的打字效果 3.21 文字滚动 3.22 文字滑动 3.23 文字跳动特效 3.24 荧光效果的文本 3.25 文字逐个闪亮-霓虹灯效果 3.26 旋转式的变色文字特效 3.27 黑客帝国中的字符下落效果 3.28 获取表单中文本框的个数 3.29 光标停在文字最后 3.30 分行取textarea中的值 3.31 自动插入文本 3.32 选取textarea的指定行 3.33 文本放大镜 3.34 文本框的默认输入法 3.35 文本框显示网页中选中的内容 3.36 文字的垂直滚动 3.37 文字幻灯片 3.38 随机动态文字效果 3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最顶端的文本 3.43 JavaScript过滤SQL注入字符 3.44 textarea内实现行的翻页效果 3.45 textarea中的文本插入 3.46 查找两段文本中相同的词句 3.47 自动保存网页输出的文本 3.48 文本编辑器 第4章 鼠标特效 4.1 禁用鼠标右键 4.2 使鼠标滚轮失效 4.3 状态栏显示鼠标位置 4.4 点击鼠标右键到指定页 4.5 鼠标放到图片上会显示另外一张图片 4.6 鼠标形状定义大全 4.7 鼠标移入移出时颜色变化 4.8 跟随鼠标的文字 4.9 跟随鼠标的彩色文字 4.10 跟随鼠标的魔法文字 4.11 跟随鼠标的星星 4.12 跟随鼠标的旋转背景 4.13 图片跟随鼠标 4.14 围绕鼠标的文本 4.15 鼠标旁边的提示信息 4.16 鼠标移到下拉框时自动全部打开 4.17 checkbox鼠标移入移出的特效 第5章 层和框架的特效 5.1 div层提示效果 5.2 层自动滚动到最底端 5.3 div的自动滚动 5.4 div的折迭效果 5.5 圆角div 5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值