elementUI 表单验证动态数据验证格式及验证规则的格式

最新推荐文章于 2025-05-17 16:16:59 发布

伯兼

最新推荐文章于 2025-05-17 16:16:59 发布

阅读量550

点赞数

CC 4.0 BY-SA版权

分类专栏：我的前端开发之路文章标签： elementui javascript 前端

本文链接：https://blog.csdn.net/weixin_44462984/article/details/122074857

我的前端开发之路专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种在Vue项目中解决表单验证错误显示不消失的问题的方法，并提供了一个具体的例子来说明如何设置验证规则及使用mounted钩子清除初始验证错误。

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

按例子：

v-model="dataArr.children[0].paymentAccount" 绑的值是接口返回的下拉数据

这个时候如果按照一般的逻辑写验证规则会出现验证报错后输入正确的依旧无法隐藏报错的bug

改进：

rules: {

'children[0].paymentAccount': [{ required: true, message: '请选择付款账户', trigger: 'blur' }],

}

这样写就可以了 trigger建议写 blur 为了保证不在页面加载赋值的时候启动验证导致一进入页面就验证报错

mounted() {

this.$refs['ruleForm'].clearValidate();

可以在mounted里先清除一下验证报错

附完整表单代码

 <el-form
            :model="dataArr"
            :rules="rules"
            ref="ruleForm"
            :validate-on-rule-change="false"
            style="margin-top:20px"
            label-width="100px"
            class="demo-ruleForm"
          >

            <div>
              <el-form-item
                label="付款账户"
                class="paymentVal"
                prop="children[0].paymentAccount"
                style="width:50%;"
              >
                <el-select
                  v-model="dataArr.children[0].paymentAccount"
                  placeholder="请选择付款账户"
                  @change="changeItemAccount"
                >
                  <el-option v-for="(v,i) in account" :key="i" :label="v.channelName" :value="v.id"></el-option>
                </el-select>
              </el-form-item>
            </div>

           
            <div class="btnClass">
              <el-button @click="resetForm()">取消</el-button>
              <el-button type="primary" @click="submitForm('ruleForm')">续费</el-button>
            </div>
          </el-form>


data(){
 dataArr: {
        children: [
          {
            paymentAccount: '',   //
            ,
          },
        ],
      },}

js：
rules: {
       
        'children[0].paymentAccount': [{ required: true, message: '请选择付款账户', trigger: 'blur' }],
     
      },