平时太忙了，很少有时间整理一下技术文章，自己做的一套登录、注册这块的验证，和大家分享一下：
整个页面是长这个样子的

normal

错误验证的页面显示

error

正确的页面显示

success

用户名（若自定义只需要修改正则即可）：

 <input type="text" name="YourName"  v-model="username" :class="{ 'nameshowError': nameShow}" @blur.stop="enterName(username)" ref="nameValues" placeholder="用户名" autocomplete="off"> 
<p class='Tel-error' v-show="nameShow">用户名在4~16个字符之间(可包含中文,数字,字母和下划线)</p>

验证方法 ↓↓↓

 enterName () {
        var entername = this.$refs.nameValues.value
        var reName = /^[\u4e00-\u9fa5\w]{4,16}$/
        if (reName.test(entername)) {
          this.nameShow = false
        } else {
          this.nameShow = true
        }
   }

手机号

 <input type="tel" name="YourTel" class="reg-tel" v-model="Tel" @blur.stop="enterTel(Tel)" :class="{ 'telshowError': telShow}" ref="TelValues" placeholder="请输入11位中国大陆手机号码" autocomplete="off">
<p class='Tel-error' v-show="telShow">请输入正确的手机号码</p>

验证方法 ↓↓↓

 enterTel () {
      var phone = this.$refs.TelValues.value
      var reTel = /^1[34578]\d{9}$/
      if (reTel.test(phone)) {
          this.telShow = false
      } else {
          this.telShow = true
      }
}

获取验证码

<div class="reg-getCode-content">
          <input type="text" name="YourCode" class="reg-code" :class="{ 'codeshowError': isShow}" v-model='codes' ref="codeValues" placeholder="请输入验证码" autocomplete="off">
          <input type="button" name="YourGetCode" class="reg-get-code" @click.stop="getRegistCode" value="获取验证码" v-show="timeshow">
          <span v-show="!timeshow" class="count">{{count}}</span>
        </div>
<p class='Code-error' v-show="codeShow" v-model='codes'>请输入正确的验证码</p>

验证方法（30s） ↓↓↓

getRegistCode () {
        var that = this
        var Tel = that.Tel
        var codes = that.codes
        const TIME_COUNT = 30
        var reTel = /^1[34578]\d{9}$/
        if (reTel.test(Tel)) {
          if (!this.timer) {
            this.count = TIME_COUNT
            this.timeshow = false
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--
              } else {
                this.timeshow = true
                clearInterval(this.timer)
                this.timer = null
              }
            }, 1000)
          }
          accountApi.getCodes({
            phone: Tel,
            code: codes
          }, (rsp) => {
            if (rsp.status === 200) {
              alert('发送成功')
            }
          })
        }
      }

邮箱

<input type="email" name="YourEmail" class="reg-email" @blur.stop="enterEmail(emails)" :class="{ 'emailshowError': emailShow}" v-model="emails" ref="emailValue" placeholder="邮箱" autocomplete="off">
<p class="Email-error" v-show="emailShow">请输入正确的邮箱格式</p>

验证方法 ↓↓↓

enterEmail () {
    var enterEmail = this.$refs.emailValue.value
    var reEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
    if (reEmail.test(enterEmail)) {
          this.emailShow = false
    } else {
          this.emailShow = true
    }
}

设置密码&重复密码

<input type="password" name="YourPsd" class="reg-psd" v-model="passwords" @blur.stop="enterPsd(passwords)" :class="{ 'psdshowError': psdShow}" ref="PsdValues" placeholder="请输入8-20位密码" autocomplete="off">
<p class="Psd-error" v-show="psdShow">密码不能含有非法字符，长度在8-20之间</p>
<input type="password" name="YourTruePsd" class="reg-true-psd" v-model="passwordConfirms" placeholder="确认密码" ref="rePsdValues" autocomplete="off">
<p class="Psd-error-again" v-show="psdShowAgain">两次输入的密码不一致</p>

验证方法 ↓↓↓

// 验证密码
enterPsd () {
        var enterPsd = this.$refs.PsdValues.value
        var rePsd = /^[a-zA-Z0-9]{8,20}$/
        if (rePsd.test(enterPsd)) {
          this.psdShow = false
        } else {
          this.psdShow = true
        }
}

在注册的时候加上判断两次密码是否一致，代码如下

if (enterPsdAgain !== enterPsd) {
          this.psdShowAgain = true
        } else {
          this.psdShowAgain = false
        }

整合在注册按钮里面也就是

// html
<div class="registered-btn-content">
     <button class="registered-btn" @click.stop="registeredAccount" :class="{'ableClick': unableClick}" :disabled="isDisabled">注册</button>
</div>

方法如下 ↓↓↓

registeredAccount () {
        var that = this
        var user = that.username
        var phone = that.Tel
        var code = that.codes
        var email = that.emails
        var password = that.passwords
        var passwordConfirm = that.passwordConfirms
        var enterPsd = this.$refs.PsdValues.value
        var enterPsdAgain = this.$refs.rePsdValues.value
        if (enterPsdAgain !== enterPsd) {
          this.psdShowAgain = true
        } else {
          this.psdShowAgain = false
        }
        if (user && phone && code && email && password && passwordConfirm) {
          accountApi.registerServer({
            user: user,
            phone: phone,
            code: code,
            email: email,
            password: enterPsd,
            passwordConfirm: enterPsdAgain
          }, (rsp) => {
            that.username = ''
            that.codes = ''
            that.Tel = ''
            that.emails = ''
            that.passwords = ''
            that.passwordConfirms = ''
            alert('恭喜您，注册成功！')
            that.$router.push('/Roleset')
          })
        } else {
          alert('请填写完整！')
        }
      }

另外还需要给注册或者登陆按钮加上回车事件

 handleEnter (el) {
        if (el.keyCode === 13) {
          this.handleLogin()
        }
      }

下面是上述代码的样式部分，需要自取

<style scoped>
  .reg-container{
    width: 100%;
    max-height:650px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .reg-container::-webkit-scrollbar {
    width: 9px;
  }
  .reg-container::-webkit-scrollbar-track {
    background-color: #fff;
  }
  .reg-container::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0)
  }
  .reg-container::-webkit-scrollbar-button {
    background-color: #fff;
  }
  .reg-container::-webkit-scrollbar-corner {
    background-color: black;
  }
  .regMember{
    width:900px;
    min-height:538px;
    background:#fff;
    border:1px solid #ccc;
    margin: 40px auto;
  }
  .regTip{
    height:56px;
    line-height:56px;
    border-bottom:1px solid #ccc;
    font-size:16px;
    font-family: PingFangSC-Medium, sans-serif;
    color:#333;
    padding-left:30px;
  }
  .reg-name, .reg-tel, .reg-email, .reg-psd, .reg-true-psd{
    display:block;
    width:420px;
    height:42px;
    line-height:42px;
    color:#666;
    font-size:14px;
    text-indent: 20px;
    font-family: PingFangSC-Medium, sans-serif;
    margin:0 auto;
    border-radius:4px;
    border:1px solid #ddd;
    background:#f5f5f5;
    outline:none;
  }
  .reg-getCode-content{
    text-align: center;
  }
  .reg-code{
    width:290px;
    height:42px;
    line-height:42px;
    color:#666;
    font-size:14px;
    text-indent: 20px;
    font-family: PingFangSC-Medium, sans-serif;
    margin:0 auto;
    margin-right:16px;
    border-radius:4px;
    border:1px solid #ddd;
    background:#f5f5f5;
    outline:none;
  }
  .reg-get-code{
    width:110px;
    height:42px;
    line-height:42px;
    display:inline-block;
    color:#666;
    font-size:14px;
    font-family: PingFangSC-Medium, sans-serif;
    margin:0 auto;
    border-radius:4px;
    border:1px solid #ddd;
    background:#f5f5f5;
    outline:none;
    cursor:pointer;
  }
  .count{
    width:110px;
    height:42px;
    line-height:42px;
    display:inline-block;
    color:#666;
    font-size:14px;
    font-family: PingFangSC-Medium, sans-serif;
    margin:0 auto;
    border-radius:4px;
    border:1px solid #ddd;
    background:#f5f5f5;
    outline:none;
  }
  .reg-name{
    margin-top:30px;
  }
  .reg-tel, .reg-getCode-content, .reg-email, .reg-psd, .reg-true-psd{
    margin-top:20px;
  }
  .reg-agreePage{
    width:100%;
    display:inline-block;
    margin-top:20px;
    margin-bottom:20px;
    margin-left:237px;
    color:#666;
    font-size:14px;
  }
  .reg-agreePage>a{
    color:#05b6f7;
    text-decoration: none;
  }
  .agreePage{
    margin-left:16px;
  }
  #reg-check[type="checkbox"]{
    position: relative;
    top:2px;
    display: none;
  }
  #cho-bg::before{
    content: '';
    display:inline-block;
    border:1px solid #06b5f8;
    width:14px;
    height:14px;
    vertical-align: middle;
    position: relative;
    right: -6px;
    bottom: 1px;
  }
  #reg-check[type="checkbox"]:checked + #cho-bg::before{
    background: url('~static/loginPic/register/ischeckbox.png') center no-repeat;
  }
  .registered-btn{
    width:420px;
    height:35px;
    background:#05b6f7;
    color:#fff;
    font-size:16px;
    border:none;
    border-radius:4px;
    cursor:pointer;
  }
  .registered-btn-content{
    text-align: center;
  }
  .go-login{
    color:#666;
    margin-left:532px;
    font-size:14px;
    margin-top:20px;
  }
  .go-login>a{
    color:#05b6f7;
    text-decoration: none;
  }
  .codeshowError,
  .nameshowError,
  .telshowError,
  .emailshowError,
  .psdshowError{
    border:1px solid #fd7b57;
    background:#ffc1b2;
  }
  .Tel-error,
  .Name-error,
  .Code-error,
  .Email-error,
  .Psd-error,
  .Psd-error-again{
    color:#fd683d;
    font-size:12px;
    margin-left:240px;
    margin-top:20px;
  }
  .ableClick{
    background:#ccc;
    cursor:default;
  }
</style>

       另外针对找回密码和重置密码需要保存鉴权token，后端给返回一个随机token（在有效期内操作），针对重置密码就不难了，无非就是调接口，还有通过手机号找回密码，邮箱找回密码（加上判断某种邮箱去对应的邮箱登录也是有做的），需要的留个邮箱~