vuelidate 异步验证器 - 如何去抖动? [英] vuelidate async validator - how to debounce?
问题描述
所以我的电子邮件/用户表单元素上的异步验证器有问题.每次输入字母时，它都会检查验证.如果电子邮件是 30 个字符，那就是超过 30 个电话！任何人都知道去抖动 vuelidate 自定义验证器的最佳方法吗?当我尝试使用 debounce 时，我从 vuelidate 收到各种错误，因为它正在等待响应.
<label for="emailAddress">电子邮件地址</label><输入类型=电子邮件"class="form-control col-md-6 col-sm-12";v-bind:class="{'is-invalid': $v.user.email.$error }";id="电子邮件地址"v-model.trim=$v.user.email.$model"@change="delayTouch($v.user.email)";aria-descriptionby="emailHelp";placeholder="email@example.com"><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 更有效.
<输入类型=电子邮件"class="form-control col-md-6 col-sm-12";:class="{'is-invalid': !$v.user.email.$anyError }";id="电子邮件地址"v-model.trim=$v.user.email.$model"@change="delayTouch($v.user.email)";@blur=$v.user.email.$touch()";aria-descriptionby="emailHelp";placeholder="email@example.com";>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@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>
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@example.com"
>
这篇关于vuelidate 异步验证器 - 如何去抖动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
