vuetify.js 中的电子邮件验证答案

【问题标题】：Email validation n vuetify.jsvuetify.js 中的电子邮件验证
【发布时间】：2018-10-06 23:09:12
【问题描述】：

我有一个电子邮件字段

    <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 时验证电子邮件。即email不是必填字段，但如果是email typed，则必须是validate。

也试过了，当我像这样在脚本中更改: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

【问题讨论】：

您将编写一个简单的函数并将其嵌套在代码中，以便它仅在电子邮件长度不为 0 时执行，例如。您是否对使用此类代码的编程语法有疑问？还是一般的方法去搞？或者是你有这样的功能，但它没有按照你期望的方式工作？我认为这个问题并不清楚。
嗨@onlyphantom，我编辑了代码，这里的电子邮件验证在提交时有效，即使我没有输入任何电子邮件。但只有当电子邮件的格式不正确时，我才需要验证。
为什么不使用简单的 inpuyt Email required 属性，如下例所示：var x = document.getElementById("myEmail").required;
嗨@EmileCantero，我不需要电子邮件作为必填字段，如果输入电子邮件则只需要格式验证

标签： vue.js vuetify.js

【解决方案1】：

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

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

【讨论】：

请注意，TLD 可以超过 3 个字符，当前的正则表达式将拒绝它们。例如。 "john.doe@company.asia" 与正则表达式不匹配，尽管 .asia 是有效的 TLD
参考@Freggar 的评论，以防有人不知道将 w{2,3} 部分更改为 w{2,4} 会修复它，并且 .asia 将被接受。电子邮件规则：[ v => !v || /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,4})+$/.test(v) || '电子邮件必须有效']
此模式不允许在电子邮件地址中使用 + 号，例如 test+1@gmail.com

【解决方案2】：

这对我有用。

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

【讨论】：

【解决方案3】：

看看那个..

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

【讨论】：

这很好，我真的很喜欢简单 - 但要小心匹配 ^ 和 $ - 对我来说这很好用：/^[^\s@]+@[^\s@]+ $/

【解决方案4】：

我已经像这样将我的功能放在手表中，并且只在不为空时应用电子邮件规则：

模板：

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

这对我有用，希望对你有用:)

【讨论】：