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

最新推荐文章于 2024-06-20 20:20:21 发布

野生♆奥特曼

最新推荐文章于 2024-06-20 20:20:21 发布

阅读量169

点赞数

分类专栏： javascript 文章标签： javascript html vue.js

本文链接：https://blog.csdn.net/qq_64143127/article/details/124997763

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!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>