Question

我有一个验证器，用于检查用户名是否已在数据库中注册。它工作得很好，除了事实上，请求是在输入每个字符的情况下发送到服务器的 - 这是经常的方式。所以我试图去除用户名变量值的设置，但我得到的就是：

Uncaught TypeError: Cannot read property 'value' of undefined 
at a.NHnr.q.methods.debounceUsername.H.a.debounce.leading

Vue脚本：

import uniqueUsername from '../validation/uniqueUsername'
import _ from 'lodash'

export default {
    name: "signUpPage",
    data() {
      return {
        credentials: {
          username: ''
        }
      }
    },
    methods: {
      debounceUsername:
        _.debounce(function (e) {
          this.credentials.username = e.target.value;
        }, 200, {leading: false, trailing: true})
    },
    validations: {
      credentials: {
        username: {
          uniqueUsername: uniqueUsername
        }
      }
   }
}

HTML：

    <b-field :label="msg('usernameLabel')"
             :class="{ 'form-group--error': $v.credentials.username.$error }">
      <b-input size="is-large" type="text" class="form__input"
               icon="account" name="username" v-on:input="debounceUsername" autofocus="">
      </b-input>
    </b-field> 
//b-field and b-input are from buefy library

自定义验证器（uniqueUsername.js）：

import axios from 'axios'

export default value => {
  if (value.trim().length === 0) return true;
  let usernameUnique;
  return new Promise(async function (resolve) {
    await axios('/isUsernameUnique', {
      method: "post",
      data: value,
      headers: {'Content-type': 'text/plain'}
    }).then((response) => usernameUnique = response.data);
    if (usernameUnique) resolve('username is unique');
  });
};

Answer 1

一种解决方案是检查用户何时聚焦输入字段（模糊），然后运行异步验证。那么：

<input @blur="$v.username.$touch" v-model.lazy="username" />

剧本：

export default {
  data () {
   return {
    username: ''
   }
  },
  validations: {
    username: {
     required,
     isUnique(username) {
       if (username === '') return true
       return axios.get('/checkUsername')
                 .then(res => {
                   return res.data //res.data has to return true or false after checking if the username exists in DB
                 }) 
     }
    }
  }
}

注意：为了使用此代码，您必须从vuelidate
导入axios和required
还要记住。如果用户名是唯一的，后端必须返回false才能使上述代码正常工作

Answer 2

我找到了答案。我不得不改变

this.credentials.username = e.target.value;

为：

this.credentials.username = e;

它现在有效 - 发送请求的频率现在每200ms最多一次

Vue.js vuelidate：如何去抖异步自定义验证器？

2 个答案: