表单校验中自定义规则参数

表单校验中自定义规则与传参

elementUI 表单校验对输入框的值以传参形式限制长度

目的

业务代码中，经常会出现对表单输入框的值的长度进行限制，从而提升用户体验。

所以需要自定义校验规则，但如果输入框的长度限制都不相同，我们不能频繁去定义规则。

当然这并不只单独针对于长度的规则定义，只是以此为例，可以根据此例应对业务需要调整

定义校验规则JS文件

	// 输入长度校验
	
	export const strLength = (rule, value, callback) => {
	
	  if (!value) {
	    callback();
	  } else if (value.length > rule.strLength) {
	    callback(new Error(`此项最多可输入${rule.strLength}个字符`))
	  } else {
	    callback()
	  }
	
	}

可以看到在上述代码中，对校验的文本 value 的长度进行了判断，如果长度不足将会进行提示。
而我们校验的长度标准是取得的参数 rule.strLength。

文件中使用

1. 引入规则

	import { strLength } from "xxxxxxx";

2. 在data中定义的表单校验规则中使用自定义方法

	export default {
	    name: "xxxxx",
	    data() {
	      return {
		      form:{
			      name:'',
		      },
		      rules:{
			      name:[
				      {
			              validator: strLength,
			              trigger: "blur",
			              strLength: 32
			          },
			      ]
		      }
	      }
	    }
	}

在上述 data 中的校验规则 rules 中可以看到，我们使用了自定义规则 strLength 的同时增加了一对“kv” strLength: 32 ,而它将会传递到我们的 JS规则文件中并可以通过形参 rule 拿到和使用，我们可以通过 console.log() 进行查看，如下：

	export const strLength = (rule, value, callback) => {
		console.log("rule========",rule)
		...... // 这里就是写你的规则逻辑
	}