标签：传参 form ElementUI maxLen trigger blur validateLength callback validator

背景

对于form表单自定义校验，其实有的时候我们可以进行复用，从而避免重复代码

参考了一下网上的方法，大致有以下两种方法

方法1：通过自定义函数传参(推荐)

代码示例

• html代码

<template>
 <el-form
   :model="ruleForm"
   status-icon
   :rules="rules"
   ref="ruleForm"
   label-width="100px"
   class="demo-ruleForm"
 >
   <el-form-item label="文本1" prop="text1">
     <el-input type="text" v-model="ruleForm.text1"></el-input>
   </el-form-item>
   <el-form-item label="文本2" prop="text2">
     <el-input type="text" v-model="ruleForm.text2"></el-input>
   </el-form-item>
   <el-form-item label="文本3" prop="text3">
     <el-input type="text" v-model="ruleForm.text3"></el-input>
   </el-form-item>
   <el-form-item>
     <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
     <el-button @click="resetForm('ruleForm')">重置</el-button>
   </el-form-item>
 </el-form>
</template>

• js代码

data() {
	const validateLength = function (maxLen) {
	  return function (rule, value, callback) {
		if (value.length > maxLen) {
		  callback(new Error(`长度最大为${maxLen}`));
		} else {
		  callback();
		}
	  };
	};
	return {
	  ruleForm: {
		text1: "",
		text2: "",
		text3: "",
	  },
	  rules: {
		text1: [{ validator: validateLength(3), trigger: "blur" }],
		text2: [{ validator: validateLength(6), trigger: "blur" }],
		text3: [{ validator: validateLength(9), trigger: "blur" }],
	  },
	}
}

方法2: 通过bind重新指定this指向，完成传参

需要注意的是，此方法定义的validate函数不能通过es6的箭头形式指定，因为es6箭头函数会导致函数内部this指向vue实例，从而导致后续步骤出错

代码示例

• js代码

export default {
  data() {
	const validateLength = function (rule, value, callback) {
	  // 此处this指向自定义的对象，即可拿到自定义的maxLen进行不同的判断
	  if (value.length > this.maxLen) {
		callback(new Error(`长度最大为${this.maxLen}`));
	  } else {
		callback();
	  }
	};
	const text1Obj = {
	  maxLen: 4,
	};
	const text2Obj = {
	  maxLen: 6,
	};
	const text3Obj = {
	  maxLen: 8,
	};
	return {
	  ruleForm: {
		text1: "",
		text2: "",
		text3: "",
	  },
	  rules: {
		text1: [{ validator: validateLength.bind(text1Obj), trigger: "blur" }],
		text2: [{ validator: validateLength.bind(text2Obj), trigger: "blur" }],
		text3: [{ validator: validateLength.bind(text3Obj), trigger: "blur" }],
	  },
	};
  }

标签：传参,form,ElementUI,maxLen,trigger,blur,validateLength,callback,validator
来源： https://blog.csdn.net/xuefeng11111/article/details/122363662

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。