用正则表达式写出表单验证

表单验证

• 用户名：长度4~12，英文大小写字母。正则：/^[a-zA-Z]{4,12}$/。

• 密码：长度6~20，大小写字母、数字或下划线。正则：/^\w{6,20}$/。

• 确认密码：要求与密码框一样，且两次输入相同。正则：RegExp(‘^’ + 密码框的值 + '$')

• 手机号码：13、14、15、17、18开头的11位手机号。正则：/^1[34578]\d{9}$/。

• 邮箱：用户名 @ 域名（域名后缀至少2个字符）。正则：/^(\w+(_|-|.)*)+@(\w+(-)?)+(.\w{2,})+$/。

• 编写用户注册表单，包含用户名、密码、确认密码、手机号以及电子邮箱。

• 表单项添加失去焦点处理，事件处理函数为 inputBlur()。

• 编辑 inputBlur() 函数，获取表单 name、value 及提示信息后，去除空白后，若内容为空调用 error() 给出提示，否则进行验证。

• 编写 error() 函数完成错误提示

• 编写 getRegMsg() 函数获取验证的正则及提示信息。

• 根据正则验证 value 值，成功调用 success() 给出通过的提示。

• 编写 success() 函数完成错误及成功的提示。

CSS页面代码：

  <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .box{
      width: 600px;
      margin: 100px auto;
      padding: 20px 30px;
      background-color: #f0f0f0;
      box-shadow:0 0 10px rgba(0, 0, 0, 0.3) ;
      border-radius: 10px;
    }
    .box-title{
      margin-bottom: 20px;
      text-align: center;
    }
    .box-content form{
      display: flex;
      flex-direction: column;
    }
    .box-content .label{
      display: flex;
      flex-direction: column;
      margin-bottom: 10px;
    }
    .box-content .label-item{
      display: flex;
    }
    .box-content .label-title{
      width: 80px;
      flex-shrink: 0;
      font-style: 14px;
      line-height: 40px;
      text-align-last: justify;
    }
    .box-content .label-control {
      margin-left: 20px;
      flex: 1;
    }
    .box-content .label-control input {
      display: block;
      width: 100%;
      padding: 0 20px;
      height: 40px;
      font-size: 14px;
      border: 1px solid #eee;
      outline: none;
      line-height: 40px;
      border-radius: 5px;
    }
    .box-content .label-control input:focus {
      border-color: #0049f3;
    }

    .box-content .label-control input.red {
     border-color: #f30004;
    }
    .box-content .label-hint {
      display: none;
      margin-top: 10px;
      font-size: 12px;
      color: #999;
      text-align: right;
    }
    .box-content .label-hint.show {
      display: block;
    }
    .box-content .label-item.btns{
      flex-direction: column;
    }
    .box-content .label-item .btn{
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      /* border-radius: 5px; */
      cursor: pointer;
      outline: none;
    }
    .box-content .label-item .btn-submit{
      margin-bottom: 10px;
      border-radius: 5px;
      background-color: rgb(0, 13, 255);
      border-color: transparent;
    }
  </style>

 HTML页面代码：

<div class="box">
  <h2 class="box-title">注册页面</h2>
  <div class="box-content">
    <form action="#" method="post" id="register">
      <div class="label">
        <div class="label-item">
          <div class="label-title">用户名：</div>
          <div class="label-control">
            <input type="text"name="username" placeholder="请输入用户名的长度为4~12，英文大小写字母">
          </div>
        </div>
        <div class="label-hint"></div>
      </div>
      <div class="label">
        <div class="label-item">
          <div class="label-title">密码：</div>
          <div class="label-control">
            <input type="password" name="userpass" placeholder="请输入密码的长度6~20，大小写字母、数字或下划线">
          </div>
        </div>
        <div class="label-hint"></div>
      </div>
      <div class="label">
        <div class="label-item">
          <div class="label-title">确认密码：</div>
          <div class="label-control">
            <input type="password" name="userpass_confirm" placeholder="请再次输入密码">
          </div>
        </div>
        <div class="label-hint"></div>
      </div>
      <div class="label">
        <div class="label-item">
          <div class="label-title">手机号码：</div>
          <div class="label-control">
            <input type="text" name="usertel" placeholder="请输入手机号码为13、14、15、17、18开头的11位手机号">
          </div>
        </div>
        <div class="label-hint"></div>
      </div>
      <div class="label">
        <div class="label-item">
          <div class="label-title">邮箱：</div>
          <div class="label-control">
            <input type="email" name="useremail" placeholder="请输入邮箱为用户名 @ 域名（域名后缀至少2个字符）">
          </div>
        </div>
        <div class="label-hint"></div>
      </div>
      <div class="label">
        <div class="label-item btns">
          <button class="btn btn-submit"type="submit">提交</button>
          <button class="btn btn-reset"type="reset">重置</button>
        </div>
      </div>
    </form>
  </div>
</div>

JS页面代码：

<script>
   // 获取每个输入框
  let _register=document.getElementById('register');
   // 给每一个输入框添加一个丢失焦点事件的监听
  let _inputs=_register.getElementsByTagName('input');
  for(let i in _inputs){
    _inputs[i].onblur=inputBlur;
  }
  _register.onsubmit=checkForm;
  function checkForm(){
    if(!formCheck(_inputs[0])||!formCheck(_inputs[1]) || !formCheck(_inputs[2]) || !formCheck(_inputs[3]) || !formCheck(_inputs[4])){
      return false;
    }
    return true;
  }
  _register.onreset=function(){
    for(let i in _inputs){
      _inputs[i].classList.remove('red');
      let _hit=_inputs[i].parentNode.parentNode.nextSibling;
      _hit.classList.remove('show');
      _hit.innerHTML='';
    }
  }
  function inputBlur(){
    let _name = this.name;
    let _val = this.value;
    let _reg = '';
    let _msg = this.placeholder;
    let _hit = this.parentNode.parentNode.nextElementSibling;
    // trim 去除字符串两侧空白内容
    _val = _val.trim();
    _reg = getReg(_name);
    if (!_reg.test(_val)) {n 
      this.classList.add('red');
      _hit.innerHTML = _msg;
      _hit.classList.add('show');
      return false;
    } else {
      this.classList.remove('red');
      _hit.classList.remove('show');
      _hit.innerHTML = '';
      return true;
      }    
    }
    function getReg(name){
      let _reg='';
      switch(name){
        case 'username':
          _reg=/^[a-zA-Z]{4,12}$/;
          break;
          case 'userpass':
            _reg=/^\w{6,20}$/;
            break;
            case 'userpass_confirm':
              let _userpass_val=_inputs[1].value;
              _reg=RegExp('^' + _userpass_val + '$');
              break;
              case 'usertel':
                _reg = /^1[34578]\d{9}$/;
                break;
                case 'useremail':
                _reg = /^(\w+(\_|\-|\.)*)+@(\w+(\-)?)+(\.\w{2,})+$/;
                break;
      }
      return _reg;
    }
</script>

运行结果如图：