开源表单设计器vue-form-design自动化校验实现原理

<template>
  <div>
    <!-- 表单设计器组件 -->
    <form-design ref="formDesigner" />
  </div>
</template>
 
<script>
import FormDesigner from 'vue-form-design-iview'
 
export default {
  components: {
    FormDesigner
  },
  methods: {
    // 自动生成规则
    autoGenerateRules() {
      const formDesigner = this.$refs.formDesigner
      if (formDesigner) {
        const formList = formDesigner.getFormList()
        formList.forEach(item => {
          if (!item.check) {
            const rule = this.generateRule(item)
            if (rule) {
              formDesigner.addRules(item.key, rule)
            }
          }
        })
      }
    },
    // 根据字段生成规则
    generateRule(item) {
      let rule = null
      switch (item.type) {
        case 'input':
        case 'password':
        case 'url':
        case 'email':
        case 'date':
          rule = { required: item.required, message: `${item.title}不能为空`, trigger: 'blur' }
          break
        case 'select':
          if (item.props.multiple) {
            rule = { type: 'array', required: item.required, message: `${item.title}不能为空`, trigger: 'change' }
          } else {
            rule = { required: item.required, message: `${item.title}不能为空`, trigger: 'change' }
          }
          break
      }
      return rule
    }
  }
}
</script>

这个代码实例展示了如何在一个Vue组件中使用vue-form-design-iview表单设计器，并且如何自动为表单字段生成验证规则。autoGenerateRules方法会遍历表单设计器中的所有字段，并根据字段类型调用generateRule方法生成相应的验证规则，然后使用addRules方法将规则添加到字段上。这个例子简化了实际的业务逻辑，但提供了一个清晰的自动生成规则的方法。