电子邮件验证 n vuetify.js

Question

我有一个电子邮件字段

    <template>
  <v-form v-model="valid">
    <v-text-field
      label="Name"
      v-model="name"
      :rules="nameRules"
      :counter="10"
      required
    ></v-text-field>
    <v-text-field
      label="E-mail"
      v-model="email"
      :rules="emailRules"

    ></v-text-field>
  </v-form>
</template>

和验证规则，如

 <script>
  export default {
    data: () => ({
      valid: false,
      name: '',
      nameRules: [
        v => !!v || 'Name is required',
        v => v.length <= 10 || 'Name must be less than 10 characters'
      ],
      email: '',
      emailRules: [
        v => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
      ]
    })
  }
</script>

但它会在我提交表单时验证表单，我只需要在 email.length>0 时验证电子邮件。即电子邮件不是必填字段，但如果输入电子邮件，则必须对其进行验证。

也尝试过，当我更改 :rules="[emailRules.em]" 像这样和在脚本中

emailRules: {
                        em:v => {
                        if(v.length > 0 && /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) )
                            return ''E-mail must be valid';
                          return true;
                    }
                    }

它总是返回真

原文由 geethika 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只需在规则的开头添加条件 !v ：

  emailRules: [
        v => !v || /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
      ]

原文由 Charles G 发布，翻译遵循 CC BY-SA 4.0 许可协议