验证 – 使用Vuelidate和Bootstrap Vue验证模式内的表单
发布时间:2020-12-17 21:25:14 所属栏目:安全 来源:网络整理
导读:开发商, 我正在使用Vuejs,我在模态中有一个表单,我需要使用 vuelidate在客户端验证表单的字段. 我也使用bootstrap-vue来创建模态,但是当我实现验证时,我无法通过单击点击取消按钮来清除字段和验证. 它会关闭模态,清理字段,但是当我再次打开它时,字段显示红色
开发商,
我正在使用Vuejs,我在模态中有一个表单,我需要使用 vuelidate在客户端验证表单的字段. 我也使用bootstrap-vue来创建模态,但是当我实现验证时,我无法通过单击点击取消按钮来清除字段和验证. 模板 <b-modal id="signupFormModal" title="Crie a sua conta!" ref="modal" centered @ok="handleOk" @cancel="clearForm" > <b-container fluid> <b-card> <b-form @submit.stop.prevent="handleSubmit"> <b-form-group id="email" label-for="email" > <b-form-input ref="focusElement" autocomplete="username" id="email" type="email" v-model.trim="form.email" :state="$v.form.email.$dirty ? !$v.form.email.$error : null" @input="$v.form.email.$touch()" required placeholder="E-mail" /> <small class="error">{{emailErrors}}</small> </b-form-group> </b-form> </b-card> </b-container> </b-modal> 脚本 import { required,minLength,sameAs,email } from 'vuelidate/lib/validators' export default { name: 'myForm',data: () => ({ form: { email: '',password: '',confirmPassword: '' },show: true,nameState: null }),validations: { form: { email: { required,email },password: { required,minLength: minLength(6) },confirmPassword: { required,sameAsPassword: sameAs('password') } } },computed: { emailErrors () { if (!this.$v.form.email.$dirty) { this.returnNull() return '' } else if (!this.$v.form.email.required) { this.returnFalse() return 'E-mail é obrigatório' } else if (!this.$v.form.email.email) { this.returnFalse() return 'Exemplo: exemplo@exemplo.com' } else { this.returnNull() } } },methods: { clearForm () { /* Reset our form values */ this.form.email = '' this.form.password = '' this.form.confirmPassword = '' this.$v.$reset() },handleOk (evt) { // Prevent modal from closing evt.preventDefault() if (!this.$v.invalid) { this.handleSubmit() } else { this.$v.touch() } },handleSubmit () { console.log(JSON.stringify(this.form)) this.clearForm() this.$refs.modal.hide() },focusMyElement (e) { this.$refs.focusElement.focus() },returnNull () { this.nameState = null },returnFalse () { this.nameState = false },returnTrue () { this.nameState = null } } } 有谁知道如何解决这个问题?我现在正处于这个困境2天. 提前感谢您的帮助. 解决方法
在您的clearForm方法中,只需将对$reset()的调用替换为:
this.$nextTick(() => { this.$v.$reset(); }) 在某些情况下,您需要在更新DOM并更改数据后调用$reset(),这是通过nextTick实现的 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |