当前位置：首页 > news >正文

elementUI表单校验失败自动聚焦到失败input/select等输入框

news 来源：原创 2025/5/20 1:46:38

1. 在对应的input/select等框上添加ref属性，直接根据ref就可精确地获取到元素，代码案例如下：

 <el-form ref="bpmData" :model="bpmData" :rules="formRules">
      <el-form-item label="项目名称：" prop="name" class="lineblock">
        <el-input ref="name" v-model.trim="bpmData.name" placeholder="请输入项目名称" maxlength="100" show-word-limit
                  :disabled="((!bpmData.id && false) || (bpmData.id && false))"></el-input>
      </el-form-item>
      <el-form-item label="项目需求：" prop="projectRequirementName">
        <el-input v-model.trim="bpmData.projectRequirementName" placeholder="请选择项目需求" @focus="chooseRequirement"
                  :disabled="bpmData.id ? true : false" @callBackRequirement="callBackRequirement"></el-input>
      </el-form-item>
 </el-form>

2. element-ui自带的表单验证返回中包含一个invalidFields对象，此对象包含了验证失败的所有属性名。然后for循环使用即可，就可以实现自动定位失败输入框位置并自动获取焦点。代码案例如下：

 // 根据判断为空自动获取为空情况下的焦点
    focusInput() {
      this.$refs['bpmData'].validate((valid,invalidFields) => {
        console.log(valid)
        if(valid){
          // 验证通过

        } else {
          // 验证失败
          //invalidFields对象，此对象包含了验证失败的所有属性名
          for (let obj in invalidFields) {
            this.$refs[obj].focus();
            break;
          }
        }
      })
    },