element 表单验证单个input输入框（脱离表单的），添加校验

最新推荐文章于 2025-12-08 11:15:41 发布

原创最新推荐文章于 2025-12-08 11:15:41 发布 · 1.8w 阅读

56 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Vue

当前文章被收录于：

Vue

26 篇文章 1 人学习

订阅专栏查看详情

Element

当前文章被收录于：

Element

3 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍如何在Element UI中实现单个输入框的验证，确保输入的面额不大于原始价格。在尝试多种方法无果后，通过使用Element UI的验证属性实现了这一功能，无需额外添加和配置。

项目需求是要输入的面额不能大于原来的价格，由于每次循环导致取到最后一条数据的值来校验的，很显然是不行的
在这里插入图片描述

在网上查了很多方法，也没有合适的，于是就用到了官方提供的Form-Item的属性 error
在这里插入图片描述
注:用error的话，就不需要为el-form-item添加prop和rules了，直接在el-form-item标签上添加:error="scope.row.error"即可

代码:

  <el-table-column label="优惠面额（元）">
                    <template slot-scope="scope">
                      <el-form-item :error="scope.row.error">
                        <el-input v-model.number="scope.row.parValue" @input="tableParValueChange(scope.row)" />
                      </el-form-item>
                    </template>
   </el-table-column>

   // 表格中优惠面额校验
    tableParValueChange(row) {
      if (row.parValue === '') {
        row.error = '不能为空'
      } else if (row.parValue < 1) {
        row.error = '优惠面额最小为1'
      } else if (row.parValue > row.salePrice) {
        row.error = '不能大于' + row.salePrice
      } else {
        row.error = ''
      }
    },