vue+element实现动态添加非空验证效果

最新推荐文章于 2024-12-17 14:48:40 发布

guo_123258

最新推荐文章于 2024-12-17 14:48:40 发布

阅读量2.7k

点赞数

分类专栏：前端文章标签： vue element 动态校验

本文链接：https://blog.csdn.net/guo_123258/article/details/101531253

版权

本文介绍如何在Vue结合Element的项目中，根据后台配置动态添加表单字段的非空验证规则。通过监听选项变化，更新rules对象，实现动态校验。在实际操作中遇到数组验证不生效的问题，但整体方案满足了需求。

摘要由CSDN通过智能技术生成

在工作中遇到了这样的需求，要求实现在页面上选择某个选项后，查找后台配置表来判断某几个字段是否必填，如果必填，则修改rules验证规则，添加{required:true}，必填要求。

实现思路：

根据要求，只需要在rules中对应字段名称添加"required:true" 即可。观察到rules是一个对象结构数据，可以使用ES6语法修改动态修改数据。基本结构如下：

 rules: {
     acctMonth:[
        {required:true, whitespace: true, message: '请输入正确的xxx', trigger: 'blur'},
        {max: 32, message: 'xxx不能超过32个字符', trigger: 'blur'},
      ]
}

实现代码：

获取接口数据，根据返回结果判断

handleSelect(item){
    this.submitForm.applAcctNo = item.value;    
    this.api({
         url:'/finance/cwAcctAdjData/doSelectCheck',//调用后台接口
         method:"get",
         params:{acctNo:item.value}//传入的参数
    }).then(data=>{
        //

最低0.47元/天解锁文章