Vue注冊用戶信息功能實現

注冊驗證功能

• 檢查用戶名功能
• 檢查手機號功能
• 檢查密碼功能
• 檢查短信驗證碼功能
• 檢查圖片驗證碼功能

<script>
    
   methods:{
        // 檢查用戶名 是否使用(存在)
    check_username() {
      // return true  // 注釋檢查用戶名功能
      console.log('判斷用戶名')
      console.log(this.username == '')
      var reg = new RegExp(/^[a-zA-Z0-9_-]{3,16}$/); //字符串正則表達式 4到14位（字母，數字，下划線，減號）
      if (this.username == '') {
        this.username_message = '用戶名不能為空'
        this.username_error = true
        return false
      }
      if (!reg.test(this.username)) {
        this.username_message = '用戶名格式不正確'
        this.username_error = true
        return false
      } else {
        // 去后端檢查用戶名使用數量
        // 當count > 0 用戶已存在 當count = 0 用戶不存在
        user_count({ type: 'username', data: this.username }).then((res) => {
          console.log(res)
          if (res.data.count > 0) {
            this.username_message = '用戶名已存在'
            this.username_error = true
          } else {
            this.username_message = ''
            this.username_error = false
          }
        })
      }
    },

    // 檢查手機號是否使用
    check_phone() {
      // return true  // 注釋檢查手機號功能
      console.log('檢查手機號')
      var reg = new RegExp(/^[1]([3-9])[0-9]{9}$/)
      if (this.phone == '') {
        this.phone_message = '手機號不能為空'
        this.phone_error = true
      }

      if (!reg.test(this.phone)) {
        this.phone_message = '手機號格式不正確'
        this.phone_error = true
        return false
      } else {
        // 去后端查用戶數量
        user_count({ type: 'phone', data: this.phone }).then((res) => {
          console.log(res)
           // 當count > 0 手機號已存在 當count = 0 手機號不存在
          if (res.data.count > 0) {
            this.phone_message = '手機號已存在'
            this.phone_error = true
          } else {
            this.phone_message = ''
            this.phone_error = false
          }
        })
      }
    },

    // 檢查密碼是否正確
    check_password() {
      console.log('檢查兩遍密碼')
      // debugger
      if (this.password == '') {
        this.password_message = '密碼不能為空'
        this.password_error = true
        return false
      }
      if (this.password != this.password2) {
        this.password_message = '兩遍密碼不一致'
        this.password_error = true
        return false
      }
      if (this.password.length < 6) {
        this.password_message = '密碼長度不能小於6位'
        this.password_error = true
        return false
      }
      this.password_message = ''
      this.password_error = false
    },

    // 檢查短信驗證碼
    check_msgcode() {
      if (this.code == '') {
        this.msgcode_message = '短信驗證碼不能為空'
        this.msgcode_error = true
        return false
      }
      if (this.code.length != 6) {
        this.msgcode_message = '短信驗證碼為6位'
        this.msgcode_error = true
        return false
      }
      this.msgcode_message = ''
      this.msgcode_error = false
    },

    // 檢查圖形驗證碼
    check_imgcode() {
      // debugger
      if (this.imgCode == '') {
        this.imgCode_message = '圖形驗證碼不能為空'
        this.imgCode_error = true
        return false
      }
      if (this.imgCode.length != 4) {
        this.imgCode_message = '圖形驗證碼為4位'
        this.imgCode_error = true
        return false
      }
      this.imgCode_message = ''
      this.imgCode_error = false
    },
}
    
</script>

實例