普歌 - 【js高级】- 用户名、表单验证

用户名验证分析

1.用户名只能为英文字母,数字,下划线或者短横线组成,并且用户名长度为6~16位
2.首先准备好这种正则表达式模式/$[a-zA-Z0-9_-]{6,16}^/
3.当表单失去焦点就开始验证
4.如果符合规范，则让后面的标签添加right类
5.如果不符合规范，则让后面额标签添加wrong类

表单验证分析

1.手机号码：/^1[3|4|5|7|8]\d{9}$/
2.QQ：/^[1-9]\d{4,}$/(腾讯QQ号从10000开始)
3.昵称是中文：/^[\u4e00-\u9fa5]{2,8}$/

代码如下：

<div class="registerarea">
        <h3>
          注册新用户
          <div class="login">我有账号，去<a href="#">登陆</a></div>
        </h3>
        <div class="reg_form">
          <form action="">
            <ul>
              <li>
                <label for="tel">手机号：</label>
                <input type="text" class="inp" id="tel" />
                <span class="error"> </span>
              </li>
              <li>
                <label for="">QQ：</label>
                <input type="text" class="inp" id="qq" />
                <span></span>
              </li>
              <li>
                <label for="">昵称：</label>
                <input type="text" class="inp" id="nc" />
                <span> </span>
              </li>
              <li>
                <label for="">短信验证码：</label>
                <input type="text" class="inp" id="msg" />
                <span></span>
              </li>
              <li>
                <label for="">登录密码：</label>
                <input type="password" class="inp" id="pwd" />
                <span></span>
              </li>
              <li class="safe">
                安全程度 <em class="ruo">弱</em> <em class="zhong">中</em>
                <em class="qiang">强</em>
              </li>
              <li>
                <label for="">确认密码：</label>
                <input type="password" class="inp" id="surepwd" />
                <span></span>
              </li>
              <li class="agree">
                <input type="checkbox" /> 同意协议并注册
                <a href="#">《知晓用户协议》</a>
              </li>
              <li>
                <input type="submit" value="完成注册" class="btn" />
              </li>
            </ul>
          </form>
        </div>
      </div>

reg.js：

window.onload = function () {
  var regtel = /^1[3|4|5|7|8]\d{9}$/; //手机号码的正则表达式
  var regqq = /^[1-9]\d{4,}$/; //10000
  var regnc = /^[\u4e00-\u9fa5]{2,8}$/;
  var regmsg = /^\d{6}$/;
  var regpwd = /^[a-zA-Z0-9_-]{6,16}$/;
  var tel = document.querySelector("#tel");
  var qq = document.querySelector("#qq");
  var nc = document.querySelector("#nc");
  var msg = document.querySelector("#msg");
  var pwd = document.querySelector("#pwd");
  var surepwd = document.querySelector("#surepwd");
  regexp(tel, regtel); //手机号码
  regexp(qq, regqq); //qq号码
  regexp(nc, regnc); //昵称
  regexp(msg, regmsg); //短信验证
  regexp(pwd, regpwd); //密码验证
  //表单验证的函数
  function regexp(ele, reg) {
    ele.onblur = function () {
      if (reg.test(this.value)) {
        //   console.log("正确的");
        this.nextElementSibling.className = "success";
        this.nextElementSibling.innerHTML =
          '<i class="success_icon"></i>恭喜您输入正确';
      } else {
        // console.log("不正确");
        this.nextElementSibling.className = "error";
        this.nextElementSibling.innerHTML =
          '<i class="error_icon"></i>格式不正确，请重新输入';
      }
    };
  }

  surepwd.onblur = function () {
    if (this.value == pwd.value) {
      this.nextElementSibling.className = "success";
      this.nextElementSibling.innerHTML =
        '<i class="success_icon"></i>恭喜您输入正确';
    } else {
      this.nextElementSibling.className = "error";
      this.nextElementSibling.innerHTML =
        '<i class="error_icon"></i>两次密码输入不一致';
    }
  };
};