我有一个带有电子邮件输入的 (Vuetify) 表单,该表单使用 ES6 和正则表达式来检查它是否是有效的电子邮件。我将如何设置另一个 emailConfirmationRules
规则集来检查 emailConfirmation
输入是否与 email
输入匹配?
<template>
<v-form v-model="valid">
<v-text-field label="Email Address"
v-model="email"
:rules="emailRules"
required></v-text-field>
<v-text-field label="Confirm Email Address"
v-model="emailConfirmation"
:rules="emailConfirmationRules"
required></v-text-field>
</v-form>
<template>
export default {
data () {
return {
valid: false,
email: '',
emailConfirmation: '',
emailRules: [
(v) => !!v || 'E-mail is required',
(v) => /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
],
emailConfirmationRules: [
(v) => !!v || 'Confirmation E-mail is required',
] (v) => ??? || 'Confirmation E-mail does not match'
}
}
最佳答案
规则不是处理字段确认的正确方法。 emailConfirmationRules 仅在 emailConfirmation 更改时触发,但如果您再次更改 email ,您的字段将不再匹配而不会违反任何规则。
你必须手动处理:
methods: {
emailMatchError () {
return (this.email === this.emailConfirmation) ? '' : 'Email must match'
}
}
<v-text-field v-model='emailConfirmation' :error-messages='emailMatchError()'></v-text-field>
可能还有一种使用 vee-validate 执行此操作的替代方法。
关于validation - Vuetify 表单验证——定义匹配输入的 ES6 规则,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47213703/