vue+element实现动态表单规则验证的小结

HTML

                        <!-- formFields表示需要动态生成的表单项 -->
<el-form-item v-for="item in formFields"
                        :key="item.field_code"        
                        :label="item.field_name"
                        :prop="item.field_code"
                        :rules="activeRules(item)"
                         <!-- 使用activeRules方法返回一个对象为每一个表单项设置规则  -->
                        >
                        <!-- 双向绑定表单的表单项 -->
            <el-input v-model="fromData[item.field_code]"></el-input>
          </el-form-item>
复制代码

JS

 activeRules (,) {
      let activeRules = {
        <!-- 设置验证规则,其中验证的正则是由后端提供的,存储在item里 -->
        validator: (rule, value, callback) => {
          if (item.field_code === '') callback(new Error(`xxx不能为空`)
          else callback()
        trigger: 'blur'
      }
      return activeRules
    }
复制代码

其实实现起来不是很麻烦,就当做自己练手写写博客吧,当然里面还有一些其他坑.
最后希望能对别人有所帮助吧,这样我会灰常开心QAQ
复制代码

转载于:https://juejin.im/post/5c21f75e6fb9a049af6d4a00