Email validation n vuetify.js

Question

I have an email field

    <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>

and validation rule like,

 <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>

but it validate form whnever i submit the form, i need to validate email only when email.length>0 . ie email is not a required field, but if email typed , it must be validate.

also tried, when i change :rules="[emailRules.em]" like this and in script

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

it always return true

Answer 1

Just add the condition !v at the begining of your rule :

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