vee-validateのメールアドレス用ルール(email)に気をつけろ

vee-validateのemailルールは全角文字が許容されている

このようにemailルールを使用すると、[e-mail]というアドレスを入力した際に'xxxxxxx'の部分に全角文字が入力できてしまう。
<input v-validate="'email'" data-vv-as="email" name="email_field" type="text">

解決

シンプルにカスタムルールを作る。

vee-validate.js

extend('customEmail', {
  ...email,
  validate(value) {
    // 全角文字の正規表現
    const fullWidthCharRegex = /[^\u0020-\u007E]+/
    // 全角文字が含まれている場合は false を返す
    if (fullWidthCharRegex.test(value)) {
      return false
    }
    // email ルールの結果を返す
    return email.validate(value)
  },
  message: '出力するエラーメッセージ',
})