el-form表单项自定义校验规则

目标

官网的表单项都是写死在代码里面的，但是实际我们的表单大多是通过json配置出来的，就需要动态的根据配置信息做表单校验

例如：

[{
  name: "商品名称",
  key: "productName",
  value: "",
  type: "input",
  must: true,
  placeholder: "请输入",
  limit: 20
},
...]

方案

在标签添加rules规则，第二条配置自定义校验规则

<el-form-item
  :prop="item.prop"
  :rules="[
    { required:item.must, message: item.name + '是必填项！' },
    { validator: validLimit, maxlength: item.limit },
  ]"
>
</el-form-item>

注意：动态校验文本超出长度，设置len会校验到number类型的表单，导致这个类型的情况会比较大小，而不是比较文本长度，所以自定义校验规则

// 动态参数通过在rules中添加属性，例如maxlength，在rule.maxlength接收
validLimit(rule, value, callback) {
  if (
    rule.maxlength &&
    value &&
    value.toString().length > rule.maxlength
  ) {
    callback(new Error("超出长度"));
  }
  callback();
}

附录

rules规则配置

属性	类型	说明
type	String	用于验证数据类型，默认类型为’string’
required	boolean	是否必填
pattern	regexp/string	字段值匹配正则表达式才能通过验证
min和max	number	对于字符串和数组类型，将根据长度进行比较，对于数字类型，数字不得小于min，也不得大于max
len	number	对于字符串和数组类型，对length属性执行比较，对于数字类型，此属性指示数字的完全匹配，len属性与min和max属性组合，则len优先。
enum	array	type必须设置为enum，值必须包含在从可能值列表中才能通过验证
trigger	blur/change	触发验证的时机，blur失去焦点时触发，change:值发生改变时触发
whitespace	boolean	type必须设置为string，要为仅包含空格的字符串可以whitespace设置为true
transform	function	在验证之前转换值
defaultField	array/object	type为数组或对象类型时一起使用，用来验证数组或对象中包含的所有值，进行深层验证
fields	object	type为数组或对象类型时一起使用，分别验证array/object类型的数据中的值，实现深度验证
validator	function	验证器，可以为指定字段自定义验证函数：function(rule, value, callback)
asyncValidator	function	异步验证器，可以为指定字段自定义异步验证函数 function(rule, value, callback)
message	string/jsx/function等	根据需要将消息分配给规则