关于验证：使用Vuelidate和Bootstrap Vue验证模态中的表单


Validating form inside a modal with Vuelidate and Bootstrap Vue

开发人员
我正在使用Vuejs，并且在模态中有一个表单，我需要使用vuelidate在客户端验证表单的字段。

我也使用bootstrap-vue创建模态，但是当我实现验证时，我无法使"取消"按钮一键清除字段和验证。
它关闭了模态，清理了字段，但是当我再次打开它时，字段显示为红色，显示验证错误，我必须再次单击"取消"以清除验证(不要这样做！)。 我的模板和脚本如下。

模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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>

脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
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: [email protected]'
  } 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()的调用替换为：

1
this.$nextTick(() => { this.$v.$reset(); })

在某些情况下，您需要在DOM更新和数据更改后调用$ reset()，这可以通过nextTick实现