1. 程式人生 > 實用技巧 >VUE非同步檢查使用者名稱和手機號(6)

VUE非同步檢查使用者名稱和手機號(6)

1.vue檢查使用者名稱是否重複

  • 前端函式如下,js方法程式碼無需更改,前端程式碼邏輯在components\common\lab_header.vue

  • 只需要修改components\axios_api\http.js中呼叫的後端地址

    • // axios.defaults.baseURL = "http://127.0.0.1:8000/"
      axios.defaults.baseURL = "http://192.168.56.100:8888/"
      
    // 檢查使用者名稱 是否使用
    check_username() {
      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 {
        // 去後端檢查使用者名稱使用數量
        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
          }
        })
      }
    },

2.vue檢查手機號是否重複

    // 檢查手機號是否使用
    check_phone() {
      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)
          if (res.data.count > 0) {
            this.phone_message = '手機號已存在'
            this.phone_error = true
          } else {
            this.phone_message = ''
            this.phone_error = false
          }
        })
      }
    },