vuelidate 异步验证器 - 如何去抖动?

问题描述

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

<label for="emailAddress">电子邮件地址</label><small v-if="!$v.user.email.$error";id="emailHelp"class="form-text text-muted">我们绝不会与任何人分享您的电子邮件.</small><div class="error invalid-feedback";v-if=!$v.user.email.required">电子邮件地址是必需的.</div><div class="error invalid-feedback";v-if="!$v.user.email.email">这不是有效的电子邮件地址.</div><div class="error invalid-feedback";v-if=!$v.user.email.uniqueEmail">此电子邮件已有帐户.</div>
<脚本>import { required, sameAs, minLength, maxLength, email } from 'vuelidate/lib/validators'从'../services/WebApiService' 导入 webapi从'../services/ApiService' 导入 apiconst touchMap = new WeakMap();const uniqueEmail = async (value) =>{控制台日志(值)；if (value === '') 返回真；return await api.get('/user/checkEmail/'+value).then((响应) => {控制台日志(响应数据)；if (response.data.success !== undefined) {console.log("电子邮件已经有一个帐户");返回假；}返回真；});}导出默认{名称:注册"，数据() {返回 {错误消息:'',显示错误:假，用户:{名: ''，姓: ''，电子邮件: ''，密码: ''，密码2:''}}},验证:{用户:{名: {必需的，最大长度:最大长度(64)},姓: {必需的，最大长度:最大长度(64)},电子邮件: {必需的，电子邮件，uniqueEmail//自定义异步验证器},密码: {必需的，minLength: minLength(6)},密码 2:{sameAsPassword: sameAs('密码')}}},方法: {提交(用户){控制台日志(用户)；/*已删除*/},延迟触摸($ v){控制台日志($v);$v.$reset()如果(touchMap.has($v)){clearTimeout(touchMap.get($v))}touchMap.set($v, setTimeout($v.$touch, 1250))}}}

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

解决方案

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

So I have an issue with async validator on my email/user form element. Every time a letter is typed in, it checks for validation. If the email is 30chars, then that is over 30 calls! Anyone know the best way to debounce a vuelidate custom validator? When I try to use debounce, i get all sorts of errors from vuelidate since it's expecting a response.

<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 protected]">
        <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>

When I try to wrap my async function with the debounce, vuelidate does not like it, so I removed it. Not sure how to limit the custom "uniqueEmail" validator.

解决方案

as 'Teddy Markov' said, you could call $v.yourValidation.$touch() on your input blur event. I think it's more efficient way to use 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 protected]"
>

这篇关于vuelidate 异步验证器 - 如何去抖动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！