강력한 비동기 검증자 - 어떻게 철회할 것인가?

강력한 비동기 검증자 - 어떻게 철회할 것인가?

그래서 내 이메일/사용자 양식 요소에 비동기 검증기에 문제가 있어.편지 한 통을 입력할 때마다 유효성 확인을 한다.이메일이 30초면 30통 이상 걸려!누가 빌어먹을 사용자 정의 검증자를 버리기 위한 가장 좋은 방법을 아는 사람?내가 디바운스를 사용하려고 할 때, 나는 그것이 반응을 기대하기 때문에 겁쟁이로부터 온갖 종류의 오류를 얻는다.

<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>

내가 비동기 기능을 디바운드로 포장하려고 하면, vuelidate는 그것을 좋아하지 않아서 나는 그것을 제거했다.사용자 정의 "UniqueEmail" 검증자를 제한하는 방법을 잘 모르십시오.

'테디 마르코프'가 말했듯이, 당신은 전화할 수 있다.$v.yourValidation.$touch()당신이 입력하는 흐릿한 사건에 대해서.나는 그것이 부엘리드테를 사용하는 더 효율적인 방법이라고 생각한다.

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

나는 regex 테스트가 통과되면 e-메일을 regex와 결합하여 고유 여부를 확인하는 것이 가장 좋은 방법이라는 것을 알았다. 그렇지 않으면 체크는 완전히 건너뛰었다.

참조URL: https://stackoverflow.com/questions/52885594/vuelidate-async-validator-how-to-debounce