酒店团购的网站建设,坊子营销型网站建设,seo推广团队,财经投资公司网站建设方案1. .vue中定义了3个邮箱输入框#xff0c;前面两个是输入多个邮件地址#xff0c;最后一个是使用element自带的校验来校验单个邮件地址 el-rowel-col :span24el-form-item label收件人 proptoel-input v-mo…
1. .vue中定义了3个邮箱输入框前面两个是输入多个邮件地址最后一个是使用element自带的校验来校验单个邮件地址 el-rowel-col :span24el-form-item label收件人 proptoel-input v-modelform.to typetextarea placeholder请输入收件人邮箱地址以分号;分隔/el-input/el-form-item/el-col/el-rowel-rowel-col :span24el-form-item label抄送人 propccel-input v-modelform.cc typetextarea placeholder请输入内容抄送人邮箱地址以分号;分隔/el-input/el-form-item/el-col/el-rowel-rowel-col :span12el-form-item label邮箱 propemailel-input v-modelform.email placeholder请输入邮箱 maxlength50 //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: {// ...}};
