VueJs Vee-验证错误的电子邮件验证

时间:2018-06-19 02:34:32

标签: regex vuejs2 email-validation vee-validate

版本

vee-validate:2.1.0-beta.2
vue:2.5.7

描述

使用了电子邮件验证,但它没有考虑一些有效的电子邮件,例如:

  • admin@gmail.com

它认为:

  • admin@gmail.co
  • admin1@gmail.com
  • admin@gmail1.com
  • admin@gmail.net
  • admin@gmail.ne


这是代码片段:

[<input type="email" 
    id="email" 
    name="email" 
    class="form-control" 
    placeholder="Email " 
    v-model="user.email" 
    v-validate="'required|email'" 
/> 
<span class="error-msg" v-show="errors.has('email')">{{ errors.first('email') }}</span>][1]

参见图片以供参考:https://i.stack.imgur.com/Dpz4F.png

--------------- [UPDATE]:---------------
我覆盖了电子邮件规则,现在它是:

    const email = {
  getMessage(field, args) {
    return `The ${field} must be a valid email`;
  },
  validate(value, args) {
    const EMAILREG = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;

    console.log(EMAILREG.test(value));
    console.log(VeeValidate.Rules.email(value));
    return VeeValidate.Rules.email(value) || EMAILREG.test(value);;
  }
};

VeeValidate.Validator.extend('email', email);


这个自定义规则正在做的是即使它在vee-validate的电子邮件验证中失败,如果在regEx验证中确实如此,它也会接受它。但是,它将admin @ a视为有效的电子邮件地址。

1 个答案:

答案 0 :(得分:0)

可能是你应该用+替换*因为*是0或更多的出现而+是1或更多的出现。因此,用+代替将确保在那之后存在一些东西。

^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$

一些测试用例:

admin@gmail.com - Pass
admin - Fail
admin1@gmail.com - Pass
admin@gmail1.com - Pass
admin@gmail.net - Pass
admin@gmail.ne - Pass
admin@gmail - Fail
admin@ - Fail
@gmail.com - Fail

DEMO