Element UI定义方法校验邮箱格式-Toy模板网

这篇具有很好参考价值的文章主要介绍了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中无法调用文章来源地址https://www.toymoban.com/news/detail-837410.html

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: {
	 // ...
  }
  
  
};

到了这里，关于Element UI定义方法校验邮箱格式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！