???????平時太忙了付燥，很少有時間整理一下技術(shù)文章，自己做的一套登錄、注冊這塊的驗證维贺，和大家分享一下：
整個頁面是長這個樣子的

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個字符之間(可包含中文,數(shù)字,字母和下劃線)</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('發(fā)送成功')
            }
          })
        }
      }

郵箱

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

設(shè)置密碼&重復(fù)密碼

<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="確認(rèn)密碼" 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('請?zhí)顚懲暾?)
        }
      }

另外還需要給注冊或者登陸按鈕加上回車事件

 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>

???????另外針對找回密碼和重置密碼需要保存鑒權(quán)token努潘，后端給返回一個隨機token（在有效期內(nèi)操作），針對重置密碼就不難了坤学，無非就是調(diào)接口疯坤，還有通過手機號找回密碼，郵箱找回密碼（加上判斷某種郵箱去對應(yīng)的郵箱登錄也是有做的）深浮，需要的留個郵箱~