前端elementUI el-form个别字段增加校验

BangD2026-04-21 8:06

背景信息: 新需求是要将学员信息和训练用途增加为必填项，不想将整个el-form增减:rule校验，

只希望在这两个字段上扩展：

第一步: el-form-item 增加class="is-required" ，增加 label前边红色的 * 号

第二步：el-form增加ref

el-form-item 增加 :rules={validator:自定义校验方法,trigger:触发方法}

复制代码

<el-form :inline="true" ref="courseForm">
       
       <el-col :span="6">
        <el-form-item  label="学员信息" prop="studentId" class="is-required" 
        :rules="{validator:validCascader,trigger: 'change'}">
          <el-cascader
              placeholder="试试搜索"
              :options="distStudent"
              filterable
              style="width: 310px;"
              v-model="sendForm.studentOpt"
              size="mini"
              clearable
              
            ></el-cascader>

        </el-form-item>
       </el-col>
       
        <el-col :span="6">
        <el-form-item label="训练用途" prop="lessonType" class="is-required"
          :rules="{validator:validLessonType,trigger: 'change'}"
        >
          <el-select v-model="sendForm.lessonType" clearable placeholder="请选择训练用途" size="mini">
            <el-option
              v-for="dict in dict.type.lesson_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        </el-col>
    </el-form>

第三步：提交表单

courseForm是el-form绑定的值，studentId是el-form-item绑定的prop值

this.$refs.courseForm.validateField('studentId')

复制代码

if (this.sendForm.studentOpt.length == 0) {

        this.$refs.courseForm.validateField('studentId')

        return

      } else if(!this.sendForm.lessonType) {

        this.$refs.courseForm.validateField('lessonType')

        return

      }  else {

}