Vuetify 表单验证 - 定义匹配输入的 ES6 规则

Posted 2023-02-22

【中文标题】Vuetify 表单验证 - 定义匹配输入的 ES6 规则

【英文标题】：Vuetify Form Validation - defining ES6 rules for matching inputs

【发布时间】：2018-04-23 03:31:33

【问题描述】：

我有一个带有电子邮件输入的 (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+)*(\.\w2,3)+$/.test(v) || 'E-mail must be valid'
        ],
        emailConfirmationRules: [
            (v) => !!v || 'Confirmation E-mail is required',
        ]   (v) => ??? || 'Confirmation E-mail does not match'
    

【参考方案1】：

规则不是处理字段确认的正确方法。 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 可能还有另一种方法。

【讨论】：

这是个好方法，但最好是把这个方法放在computed中

这应该是公认的答案，谢谢！因为就像你说的，即使规则是计算属性，它们也不会对其他组件（字段）的变化做出反应。

【参考方案2】：

您可以使用计算规则完成相同的操作。

computed: 
    emailConfirmationRules() 
      return [
        () => (this.email === this.emailToMatch) || 'E-mail must match',
        v => !!v || 'Confirmation E-mail is required'
      ];
    ,

【讨论】：

有什么方法可以让它恢复原状。？我的表单是可重复使用的，但是当使用此规则时，它总是显示第二个表单和其他表单的错误

【参考方案3】：

  emailConfirmationRules: [
    (v) => !!v || 'Confirmation E-mail is required',
    (v) => v == this.email || 'E-mail must match'
  ],

【讨论】：

我想我已经更新了一些东西，解决方案一直有效，但现在我也不确定了。但不是“这个”。只是值始终未定义。属性本身具有正确的值。我想我需要改变我的验证方式。也许 vee 验证

错误答案。请参阅下面的 Eiji Shinjo 的回答。

这对我不起作用。我收到以下错误：Error in beforeMount hook: "TypeError: _this is undefined"

这是错误的答案。规则函数在没有上下文的情况下被调用（参见github.com/vuetifyjs/vuetify/blob/…）

this 在箭头函数中不可用

【参考方案4】：

  <template>   
    <v-text-field
      v-model="employee.email"
      :rules="emailRules"
      required
      validate-on-blur
      />
</template>

<script>
data() 
    return 
    emailRules: [
        v => !!v || "E-mail is required",
        v =>
          /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w2,3)+$/.test(v) ||
          "E-mail must be valid"
      ],

</script>

【参考方案5】：

查看这篇文章 https://***.com/a/58883995/9169379

<template>
  <v-input  v-model="firstPassword" />
  <v-input :rules=[rules.equals(firstPassword)] v-model="secondPassword" />
</template>

<script>    
  data() 
  firstPassword: '',
  secondPassword: '',
    rules: 
      equals(otherFieldValue) 
        return v =>  v === otherFieldValue || 'Not equals';
      
    
  
</script>