el-form的rule无法校验(没有效果)的几个注意点

时间:2025-04-11 19:07:50
  1. 使用this.$refs[xxx]方式的朋友要注意el-form声明的ref=名称 必须与xxx一致
  2. :rule = “rule”, 我们可以在data(){retrun { }} 中定义rule, 也可以直接在el-form-item属性中定义, 特别是在动态表单中, 特别实用
<el-form-item :rules="[{}]" ...
  1. 使用rule校验表单的情况下, 一定要注意在el-form-item属性中加上prop,别粗心。否则rule该项不会生效。当然, 你的prop=xxx这个也必须与model={xxx: yyy}中的属性一致。
  2. 动态表单的校验, 怎么定义prop?
<el-form-item v-for="(item, idx) in " :key="idx" :prop="'studentList.'+ idx + '.name'" :rules="[{...}]">
	<el-input v-model="" />
</el-form-item>
  1. rule校验的属性必须存在于el-form的:model中。 上一条中写的是, 而不是直接写studentList, 一般我们一个动态表单有很多复杂的属性, 不管多复杂他们的根节点都是定义的:model, 当然这是一般写法, 也是仅在vue2。