电子邮件验证 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;
                    }
                    }

它总是返回真

Answer 1

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

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

Answer 2

看看那个..

emailRules: [ v => /.+@.+/.test(v) || 'Invalid Email address' ]

Answer 3

这对我有用。

email: value => {
      if(value.length > 0) {
      const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return pattern.test(value) || 'Invalid e-mail.';
      }
    }