对多个电子邮件的逗号分隔列表进行Vuelidate验证

时间:2018-04-05 19:54:40

标签: javascript regex validation vue.js vuelidate

我正在使用vuelidate的电子邮件验证程序:

    <div class="form-group" :class="{ 'has-error': $v.newParcel.onSiteContactEmail.$error }">
      <label for="onSiteContactEmail">OnSite Contact Email</label>
      <input type="email" name="onSiteContactEmail" id="onSiteContactEmail" class="form-control" v-model="newParcel.onSiteContactEmail" @input="$v.newParcel.onSiteContactEmail.$touch" maxlength="255">
      <span v-show="$v.newParcel.onSiteContactEmail.$error || !$v.newParcel.onSiteContactEmail.email" class="help-block">Please provide a valid OnSite Contact Email</span>
    </div>

哪个效果很好,但不会验证以逗号分隔的电子邮件列表。验证器代码有一个正则表达式变量:

const emailRegex = /(^$|^(([^<>()[\]\\.,;:\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,}))$)/

我正在尝试使用validations方法自定义

onSiteContactEmail: 
  {
    required: required, 
    type: email, 
    emailRegex: /(^$|^(([^<>()[\]\\.,;:\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,}))+$)/
  }

如果有人对此有任何想法,我将非常感激!

2 个答案:

答案 0 :(得分:0)

没关系,我刚刚创建了一个自定义验证器:

link(scope, elem, attr, ngModel) {
    ngModel.$overrideModelOptions({
        updateOn: 'default blur',
        debounce: {
            blur: 0,
            default: 500,
        },
    });
}

答案 1 :(得分:0)

您可以通过以下方式进行操作:

<script>

import { required, minLength, between } from 'vuelidate/lib/validators'

export default {

  data: function () {
      ...
  },

  methods: {
      ...
  },

  validations: {
    contact: {
      firstname: {
        required,
        minLength: minLength(4)
      },
      address: {
        correctAddress (address) {
          return /[a-z]/.test(address)
        }
      }
    }
  }

}
</script>

如您所见,在validations.addres中,有一个新功能,该功能用于对您的字段进行自定义验证。