vue.js - vuelidate 异步验证器 - 如何去抖动？

Question

因此，我的电子邮件/用户表单元素上的异步验证器存在问题。每次输入字母时，它都会检查验证。如果电子邮件是 30 个字符，那就是超过 30 个电话!任何人都知道消除 vuelidate 自定义验证器的最佳方法吗？当我尝试使用 debounce 时，我从 vuelidate 收到各种错误，因为它期待响应。

<div class="form-group">
        <label for="emailAddress">Email address</label>
        <input type="email" class="form-control col-md-6 col-sm-12" v-bind:class="{ 'is-invalid': $v.user.email.$error }" id="emailAddress" v-model.trim="$v.user.email.$model" @change="delayTouch($v.user.email)" aria-describedby="emailHelp" placeholder="email@example.com">
        <small v-if="!$v.user.email.$error" id="emailHelp" class="form-text text-muted">We'll never share your email with anyone.</small>
        <div class="error invalid-feedback" v-if="!$v.user.email.required">Email address is required.</div>
        <div class="error invalid-feedback" v-if="!$v.user.email.email">This is not a valid email address.</div>
        <div class="error invalid-feedback" v-if="!$v.user.email.uniqueEmail">This email already has an account.</div>
    </div>

    <script>
        import { required, sameAs, minLength, maxLength, email } from 'vuelidate/lib/validators'
        import webapi from '../services/WebApiService'
        import api from '../services/ApiService'
    
        const touchMap = new WeakMap();
    
        const uniqueEmail = async (value) => {
            console.log(value);
            if (value === '') return true;
    
            return await api.get('/user/checkEmail/'+value)
                        .then((response) => {
                            console.log(response.data);
                            if (response.data.success !== undefined) {
                                console.log("Email already has an account");
                                return false;
                            }
                            return true;
                        });
        } 
    
        export default {
            name: "Register",
            data() {
              return {
                errorMsg: '',
                showError: false,
                user: {
                  firstName: '',
                  lastName: '',
                  email: '',
                  password: '',
                  password2: ''
                }
              }
            },
            validations: {
                user: {
                    firstName: {
                        required,
                        maxLength: maxLength(64)
                    },
                    lastName: {
                        required,
                        maxLength: maxLength(64)
                    },
                    email: {
                        required,
                        email,
                        uniqueEmail //Custom async validator
                    },
                    password: {
                        required,
                        minLength: minLength(6)
                    },
                    password2: {
                        sameAsPassword: sameAs('password')
                    }
                }
            },
            methods: {           
                onSubmit(user) {
                    console.log(user);
                    /*deleted*/
    
                },
                delayTouch($v) {
                    console.log($v);
                    $v.$reset()
                    if (touchMap.has($v)) {
                        clearTimeout(touchMap.get($v))
                    }
                    touchMap.set($v, setTimeout($v.$touch, 1250))
                }
            }
        }
    </script>

当我尝试用 debounce 包装我的异步函数时，vuelidate 不喜欢它，所以我删除了它。不确定如何限制自定义“uniqueEmail”验证器。

Answer 1

正如“Teddy Markov”所说，您可以调用$v.yourValidation.$touch()在您的输入模糊事件上。我认为使用 Vuelidate 是更有效的方式。

<input type="email" class="form-control col-md-6 col-sm-12"
           :class="{ 'is-invalid': !$v.user.email.$anyError }"
           id="emailAddress" v-model.trim="$v.user.email.$model"
           @change="delayTouch($v.user.email)"
           @blur="$v.user.email.$touch()"
           aria-describedby="emailHelp"
           placeholder="email@example.com"
>