Element UI定义方法校验邮箱格式

1. .vue中定义了3个邮箱输入框，前面两个是输入多个邮件地址，最后一个是使用element自带的校验来校验单个邮件地址

    

     <el-row><el-col :span="24"><el-form-item label="收件人" prop="to"><el-input v-model="form.to" type="textarea" placeholder="请输入收件人邮箱地址，以分号（;）分隔"></el-input></el-form-item></el-col></el-row><el-row><el-col :span="24"><el-form-item label="抄送人" prop="cc"><el-input v-model="form.cc" type="textarea" placeholder="请输入内容抄送人邮箱地址，以分号（;）分隔"></el-input></el-form-item></el-col></el-row><el-row><el-col :span="12"><el-form-item label="邮箱" prop="email"><el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" /></el-form-item></el-col> </el-row>

2. js定义校验规则

注意： 校验规则rules中若想调用方法，那么这个方法必须放到data的子定义中，如果是放到methods中无法调用

export default {//...data() {var checkEmail = (rule, value, callback) => { //邮箱校验  ---只有在data()里面定义的方法能在data中的return里面的rules中的某些规则中调用，也就是这些方法需要在methods同级中定义，如果在methods中定义是无法在rules中调用的const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/ ;const emails = value.split(';'); if (!value) {return callback('邮箱地址不能为空');}setTimeout(() => {for (let i = 0; i < emails.length; i++) {  console.log('邮箱地址:' + emails[i].trim());if (!mailReg.test(emails[i].trim())) {  callback("邮箱地址格式不正确： "+ emails[i].trim());  }  }  callback();  // 所有邮件地址都合法}, 100)} return {//... rules: {// 表单校验to: [{ validator: checkEmail, trigger: 'blur' }],cc:[{ validator: checkEmail, trigger: 'blur' }],email: [{type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"]}]}};},methods: {// ...}};