el-form的rules如何校验多层嵌套对象

时间：2025-04-07 17:27:08

el-form的表单校验，通常情况下，都是在校验第一层对象时使用

例如：

<el-form ref="form" :model="postData" :rules="rules" class="common-form" label-width="118px" size="mini">
   <el-row>
     <el-col :span="12">
       <el-form-item prop="custType" label="客户属性">
         <el-radio-group v-model="" @change="changeCustomerType">
           <el-radio label="客户属性1">客户属性1</el-radio>
           <el-radio label="客户属性2">客户属性2</el-radio>
         </el-radio-group>
       </el-form-item>
     </el-col>
     <el-col :span="12">
       <el-form-item label="客户名称" class="hintparent" prop="custId">
         <el-select
           v-model=""
           placeholder="请选择"
         >
           <el-option
             v-for="item in customers"
             :key=""
             :label=""
             :value=""
           ></el-option>
         </el-select>
       </el-form-item>
     </el-col>
  <el-row>
</el-form>

数据结构为：

postData: {
  custType: '',
  custId: '',
},

校验规则为

rules: {
  custType: [{ required: true, message: '请选择客户属性', trigger: 'change' }],
  custId: [{ required: true, message: '请选择客户名称', trigger: 'change' }]
}

注意到 prop里的名称和属性名和rules里的检验字段名需保持一致。

现有一段数据结构如下：

postData: {
	stamp: {
       person: null,
       tel: null,
       reason: null
    }
}

当数据嵌套到两层时，校验第二层的数据时，可以这么做

<el-form-item
	 prop=""
	 label="联系人"
	 :rules="{ required:  === 0, message: '请填写联系人', trigger: 'change' }"
	>
	 <el-input v-model=""></el-input>
</el-form-item>
<el-form-item
	 v-if=" === 0"
	 prop=""
	 label="联系电话"
	 class="hintparent"
	 :rules="[
	   { required: postData.stamp.needPost === 0, message: '请填写联系电话', trigger: 'change' },
	   {
	     pattern: /^[\d\-]+$/,
	     message: '电话格式不正确',
	     trigger: 'change'
	   },
	   { max: 20, message: '电话格式不正确', trigger: 'change' }
	 ]"
	>
	 <el-input v-model=""></el-input>
</el-form-item>
<el-form-item prop="" label="盖章原因" class="hintparent">
	 <el-input
	   v-model=""
	   maxlength="2000"
	   show-word-limit
	   type="textarea"
	   :autosize="{ minRows: 4 }"
	   :rules="[
	     { required: true, message: '请填写盖章原因', trigger: 'change' },
	     { max: 2000, message: '最多只能输入2000个字', trigger: 'change' }
	   ]"
	 ></el-input>
</el-form-item>

此时props传的是去掉最外层之后的嵌套对象，rules写在组件内部，没有拎出来的原因是因为我需要判断required的值，而在data()里获取不到this会报错。
在不需要做我这种判断时，也可以拎出来，写法如下

//第一种方式
stamp: {
	 reason: [
	    { required: true, message: '请填写盖章原因', trigger: 'change' },
	    { max: 2000, message: '最多只能输入2000个字', trigger: 'change' }
	  ]
}
//第二种方式
'': [
	  { required: true, message: '请填写盖章原因', trigger: 'change' },
	  { max: 2000, message: '最多只能输入2000个字', trigger: 'change' }
]

两种方式差不多，第二种比较简洁，第一种在嵌套对象比较多时可读性更高
开发中需要注意的是，需要初始化嵌套层级多的数据的n-1层，不然会报错哦，比如这里就需要初始化：: {}，
如果是，就需要初始化到: {}

如果想校验数组内的数据呢

那就只能把校验逻辑写在标签上了

<el-form
      ref="form"
      :model="formData"
      class="common-form"
      :label-width="$ === 'US' ? '200px' : '145px'"
      size="mini"
    >
	<div v-for="(item, index) in " :key="index">
		<el-form-item
          :label="单号"
           class="hintparent"
           prop="seq"
           :rules="{
             required: true,
             message: '请输入单号',
             validator: (rule, value, callback) => validData(rule, item.seq, callback)
           }"
         >
         </el-form-item>
         <el-form-item
           :label="金额"
           class="hintparent"
           prop="amount"
           :rules="{
             required: true,
             message: '请输入金额',
             validator: (rule, value, callback) => validData(rule, item.amount, callback)
           }"
         >
         </el-form-item>
	</div>
</el-form>

<script>
	data() {
		return {
			formData: {
				arr: []
			}
		}
	},
	methods: {
		validData(rule, value, callback) {
	      if (rule.required && !value) {
	        callback(new Error(rule.message));
	      } else {
	        callback();
	      }
    	}
	}
</script>

相关文章