web-dev-qa-db-ja.com

vuetify.jsでのメール検証

メールフィールドがあります

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

常にtrueを返します

vue.jsvuetify.js
4
geethika

ルールの先頭に条件！vを追加するだけです：

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

これは私のために働いた。

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.';
      }
    }
2
Geoff Pavey

私は自分の関数をこのように監視し、次のように空でない場合にのみ電子メールルールを適用します。

テンプレート：

<v-text-field
    v-model="e_Mail"
    :rules="emailRules"
    prepend-icon="mail"
    label="Email Address"
></v-text-field>

脚本：

<script>
export default {
    data () {
        return {
            e_Mail: '',
            emailRules:[],
        }
    },
    watch: {
        e_Mail: function (mail) { // e_Mail is the exact name used in v-model
            if (mail !== '') {
                this.emailRules = [ v => (v.match(/^(([^<>()[\]\\.,;:\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,}))$/)) || 'Invalid Email address']
            } else if (mail === '') {
                this.emailRules = []
            }
        }
    }
}
</script>

これは私のために働いた、それがあなたのために働くことを願っています:)

1
Johann du Pisanie

それを見てください。

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