Element 表格嵌套表单验证单个input输入框（脱离表单的），添加校验~

scorpion_V

已于 2022-04-20 10:12:00 修改

阅读量4.6k

点赞数 5

分类专栏： vue 文章标签： elementui vue.js

于 2022-04-20 10:07:37 首次发布

本文链接：https://blog.csdn.net/scorpion_V/article/details/124289638

版权

vue 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种在Vue项目中利用Element-UI的Form-Item属性`error`进行表单字段校验的方法。通过在`el-form-item`上直接设置`:error`，避免了使用`prop`和`rules`。代码示例展示了如何在表格中嵌入表单，并在输入时实时校验相机焦距、飞机偏航角、云台俯仰角和照片名等字段，确保输入符合特定格式和范围。当输入不符合要求时，显示相应的错误提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目场景：

项目需求对表单表格的字段进行校验

在网上查了很多方法，也没有合适的，于是就用到了element-ui官方提供的Form-Item的属性 error

注:用error的话，就不需要为el-form-item添加prop和rules了，直接在el-form-item标签上添加:error="scope.row.error"即可

代码

  <el-table :data="formPoint.mapActionList" ref="mapActionList" style="width: 100%">
     <el-table-column label="动作类型" width="120" prop="actionParam">
       <template slot-scope="scope">
         <el-form-item :prop="'mapActionList.' + scope.$index + '.actionType'">
           <el-select v-model="scope.row.actionType" clearable placeholder="请选择"
             @input="onExchange(scope.$index)">
            <el-option v-for="item in typeList" :label="item.label" :value="item.value" :key="item.index">
             </el-option>
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column label="相机焦距" width="100">
                <template slot-scope="scope">
                  <el-form-item :prop="'mapActionList.' + scope.$index + '.photoZoom'" :error="scope.row.photo">
                    <el-input clearable placeholder="焦距值" v-model="scope.row.photoZoom"
                      @input="onExchange(scope.$index, scope.row, 'photo')">
                    </el-input>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column label="飞机偏航角" width="110">
                <template slot-scope="scope">
                  <el-form-item :prop="'mapActionList.' + scope.$index + '.heading'" :error="scope.row.yaw">
                    <el-input placeholder="偏航角值" clearable v-model="scope.row.heading"
                      @input="onExchange(scope.$index, scope.row, 'yaw')">
                    </el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="云台俯仰角" width="100">
                <template slot-scope="scope">
                  <el-form-item :prop="'mapActionList.' + scope.$index + '.gimbalPitch'" :error="scope.row.gimbal">
                    <el-input placeholder="俯仰角值" clearable v-model="scope.row.gimbalPitch"
                      @input="onExchange(scope.$index, scope.row, 'gimbal')">
                    </el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="拍摄照片名" width="185">
                <template slot-scope="scope">
                  <el-form-item :prop="'mapActionList.' + scope.$index + '.fileCustomName'" :error="scope.row.error">
                    <el-input placeholder="巡检目标名称" v-model="scope.row.fileCustomName" clearable
                      @input="onExchange(scope.$index, scope.row, 'fileCustom')">
                    </el-input>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>

 //表格表单嵌套太深，需要强制更新
    onExchange(index, row, name) {
      let moment = this.mapActionList[index]; // 此处的mapActionList为自己的table表格绑定的data数组
      this.$set(this.mapActionList, index, moment);// 此处是将修改的那一行的数据重新赋值给table表格对应的那一行,触发热更新
      //此处(脱离表单)进行校验
      let reg = /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,15})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,15}|180)$/;
      if (name == 'fileCustom') {
        if (row.fileCustomName.length > 9) {
          row.fileCustomName = row.fileCustomName.slice(0, 9)
          row.error = "照片名最多9个字符"
        }
        else {
          row.error = ""
        }
      } else if (name == 'photo') {
        if (row.photoZoom === "") {
          row.photo = "请输入焦距"
        } else if (row.photoZoom < 0) {
          row.photo = "最小值为0"
        } else {
          row.photo = ""
        };
      } else if (name == 'yaw') {
        if (row.heading === "") {
          row.yaw = "范围：-180~180"
        } else if (!row.heading.match(reg)) {
          row.yaw = "范围：-180~180"
        } else {
          row.yaw = ""
        };
      } else if (name == 'gimbal') {
        if (row.gimbalPitch === "") {
          row.gimbal = "范围：-90~30"
        } else if (row.gimbalPitch >= 31 || row.gimbalPitch <= -91) {
          row.gimbal = "范围：-90~30"
        } else {
          row.gimbal = ""
        };
      }
    },

最终效果：