element表单校验封装

demo
第一步,在 utils 文件夹中创建一个 rules.js 的文件

// 手机号码验证
const validatePhone = (rule, value, callback) => {
  const patter = new RegExp('^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$')
  if (!patter.test(value)) {
    return callback(new Error('请输入正确格式的手机号！'))
  } else {
    callback() // 必须有此项回调，否则验证会一直不通过
  }
}
// 邮箱的正则
const validateemail = (rule, value, callback) => {
  const mailbox = new RegExp('^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$')
  if (!mailbox.test(value)) {
    return callback(new Error('请输入正确格式的邮箱！'))
  } else {
    callback() // 必须有此项回调，否则验证会一直不通过
  }
}
export default {
  common: { // 公共验证方法
    // 手机号
    mobile: [{
      required: true,
      message: '手机号不能为空'
    }, {
      validator: validatePhone,
      trigger: 'blur'
    }],
    // 用户名
    user: [{
      required: true,
      message: '账户名不能为空'
    }],
    // 密码
    password: [{
      required: true,
      message: '密码不能为空'
    }],
    // 公司名
    companyvalue: [{
      required: true,
      message: '公司不能为空'
    }],
    // 部门
    branchvalue: [{
      required: true,
      message: '部门不能为空'
    }],
    // 角色
    rolevalue: [{
      required: true,
      message: '角色不能为空'
    }],
    // 岗位
    stationvalue: [{
      required: true,
      message: '岗位不能为空'
    }],
    // 姓名
    name: [{
      required: true,
      message: '姓名不能为空'
    }],
    // 性别
    sexvalue: [{
      required: true,
      message: '性别不能为空'
    }],
    // 生日
    birthday: [{
      required: true,
      message: '生日不能为空'
    }],
    // 微信号
    wechat: [{
      required: true,
      message: '微信不能为空'
    }],
    // 邮箱
    mailbox: [{
        required: true,
        message: '邮箱不能为空'
      },
      {
        validator: validateemail,
        trigger: 'blur'
      }
    ],
    // 类型不能为空
    typevalue: [{
      required: true,
      message: '类型不能为空'
    }],
    // 允许登陆
    allowvalue: [{
      required: true,
      message: '不能为空'
    }]
  }
}

第二步,在 main.js 中

import rules from './utils/rules.js'
Vue.prototype.$rules = rules

第三步,在 form 中的 rules

:rules="$rules.common"

第四步,例如(prop 和 v-model 要相同)

<el-form-item label="账户" prop="user" style="margin-left:15px">
<el-input v-model="formInline.user" :disabled="disabled"/>

第五步,如果子组件中的提交按钮传到了父组件

<el-button type="primary" @click="handlConfirm('formInline')">确 定</el-button>
formInline表单
   // 提交按钮
      handlConfirm(formInline) {
        this.$emit("handlConfirm");
      }

第六步,在父组件中绑定一个ref属性

<子组件  ref="formref"/>

//formInline是子组件中的ref
 handlConfirm() {
        let flag = false;
        this.$refs["formref"].$refs["formInline"].validate(valid => {
          flag = valid;
          if (valid) {
            this.dialogVisible = false;
          } else {
            return flag;
          }
        });
      },