iView UI FORM 动态添加表单项校验规则写法实例

iView UI是一个基于Vue.js的UI组件库，提供了众多的组件和功能，其中FORM组件是表单组件，可以方便的实现表单的校验和提交。

当需要动态添加表单项时，需要动态绑定表单项的校验规则。下面是iView UI FORM动态添加表单项校验规则的完整攻略：

步骤一：引入iView UI组件库

import Vue from 'vue'
import iView from 'iview'
import 'iview/dist/styles/iview.css'

Vue.use(iView)

步骤二：定义表单数据和校验规则

data () {
  return {
    formData: {},
    formRules: {}
  }
},

步骤三：添加表单项

this.$set(this.formData, 'fieldName', '')
this.$set(this.formRules, 'fieldName', [
  {required: true, message: '必填项', trigger: 'blur'},
  {pattern: /^\d+$/, message: '请输入数字', trigger: 'blur'}
])

步骤四：删除表单项

this.$delete(this.formData, 'fieldName')
this.$delete(this.formRules, 'fieldName')

示例一：动态添加表单项

this.$set(this.formData, 'age', '')
this.$set(this.formRules, 'age', [
  {required: true, message: '必填项', trigger: 'blur'},
  {pattern: /^\d+$/, message: '请输入数字', trigger: 'blur'}
])

示例二：动态删除表单项

this.$delete(this.formData, 'age')
this.$delete(this.formRules, 'age')

这是一个简单的实例，可以根据具体的需求进行修改，以实现更复杂的需求。