elementui 表单验证-elementui动态添加表单实现验证规则

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

前言：不知道大家在开发过程中是否遇到过动态添加表单生成相同的验证规则进行校准的情况。 我也踩过这方面的坑，借鉴了别人的观点，加上了自己的解决动态加法的问题。 现将表单实现验证规则的方式分享给大家，希望对正受此困扰的你有所帮助

动态添加表单项elementui 表单验证，相信大家都能做到，这里就不过多解释了，那么如何实现多个重复表单的验证呢？ 下面结合element官网和我遇到的解决方案，呈现给大家。

实现验证规则需要注意这些

1、prop绑定的参数设置为对应的需要的校准数组名称

2、规则表单验证规则

3.确保数据源来自表单绑定数据

4、默认值

export default {
    data(){
        return{
            formData:{
                name:"",
                otherMsg:[
                    {
                        professional:""
                    }
                ]
                
            }
        }
    }
}

5.循环出其他信息，默认显示一条职业信息elementui 表单验证，可以添加n个职业信息，并对每个新添加的数据进行强制校准验证规则

提醒：prop绑定的三个参数

第一个参数：循环的链表数据 第二个参数：每条数据的索引值（下标） 第三个参数：需要的校准数组名称

     
     删除

以下是动态减少表格校准的完整代码

  

    
      
        
      
      
        
        删除
      
      
        提交
        新增
      
    
  


export default {
  data() {
    return {
      formData: {
        otherMsg: [
          {
            professional: ""
          }
        ],
        name: ""
      }
    }
  },
  computed: {
    rules() {
      return {
        professional: { required: true, message: "个人信息职业不能为空", trigger: "blur" },
        name: { required: true, message: " 姓名不能为空", trigger: "blur" }
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.formData)
          alert("提交成功")
        } else {
          console.log("提交失败")
          return false
        }
      })
    },
    removeDomain(item) {
      var index = this.formData.otherMsg.indexOf(item)
      if (index !== -1) {
        this.formData.otherMsg.splice(index, 1)
      }
    },
    addDomain() {
      this.formData.otherMsg.push({
        professional: ""
      })
    }
  }
}


.form_container {
  padding: 20px;
}