如何在Vue的项目里对element的表单验证进行封装

介绍需求

熟悉并优化公司项目的第五天，领导说能不能把表单验证封装一下，我打开代码一看

由于是后台管理系统，无数个需要验证的输入框，由于截图长度受限，只能展示部分，类似于这种页面还有无数个！代码重复率非常高，难怪需要封装了。

实现思路

1.将代码从页面中抽离，在utils文件夹新建js文件存储

2.新增js代码

let FormValidate = (function () {
  // eslint-disable-next-line
  function FormValidate() {}
  // From表单验证规则  可用于公用的校验部分
  FormValidate.Form = function () {
    return {
      // 用户角色,姓名的验证规则
      name: function (rule, value, callback) {
        if (!value) {
          return callback(new Error('用户角色不能为空'))
        } else {
          callback()
        }
      },
      // 角色描述验证规则
      description: function (rule, value, callback) {
        if (!value) {
          return callback(new Error('用户描述不能为空'))
        } else {
          callback()
        }
      },
    }
  }
  return FormValidate
}())
exports.FormValidate = FormValidate

3.在页面中引入

附上代码：

// 自封装表单验证
import Format from "@/utils/FormValidation.js";

4.接下来，三方联动

HTML部分：

有三个非常重要的属性

1.model 表单数据对象

2.rules 表单验证规则

3.prop 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的

js部分：

data(){
    return{
        //定义表单数据对象
        rules: {
        	rolename: "",
        	description: "",
        	type: true,
        },
        //element 表格组件 表单验证规则
        vailmsg: {
        rolename: [
          {
            required: true,
            validator: Format.FormValidate.Form().name,
            trigger: "blur",
          },
        ],
        description: [
          {
            required: true,
            validator: Format.FormValidate.Form().description,
            trigger: "blur",
          },
        ],
      },
    }
}

至此，封装表单验证结束，需要新的验证，直接去utils里的js新建然后导入页面引用即可！

更新优化：

实现传参，减少公共js代码过多

页面调用部分这样写：

Format.FormValidate.Form("用户角色不能为空").notEmpty,

公共js里这样写：

let FormValidate = (function () {
  // eslint-disable-next-line
  function FormValidate() {}
  // From表单验证规则  可用于公用的校验部分
  FormValidate.Form = function (errorMessage) {
    // errorMessage 是我们传过来的提示文字 这样就可以一个验证多用 不用重复写
    return {
      // 输入框不为空的验证规则
      notEmpty: function (rule, value, callback) {
        console.log('e :>> ', errorMessage);
        if (!value) {
          return callback(new Error(errorMessage))
        } else {
          callback()
        }
      },
    }
  }
  return FormValidate
}())
// 向外暴露内部变量
exports.FormValidate = FormValidate