jsonschema-form-vue基于JSON Schema表单自动生成方案

作为一名前端开发，「表单开发」是我们的家常便饭，一般我们需要做以下重复性工作：

同时，后台服务也需要编写校验规则，随着业务变动或者沟通不及时，前后端校验规则可能会存在不一致问题。所以「前后端共用校验规则逻辑」也应该纳入考虑。

综上，我们希望能减少重复性工作： 通过配置自动生成表单模板，同时这个配置最好还能描述表单校验相关 ( 因为表单元素部分属性如min、max、required、pattern这些都会控制表单输入，保障校验 )

先通过一个简单的例子看下效果： Demo 、 Code

渲染结果

更多Demo 文档

然后，现在表单经常会通过JSON异步提交到服务端，所以技术选型如下：

最后，JSONSchema在表单描述上并非无所不能：

所以，我们参考了 angular schema form ，增加了 Form Definition 描述，用来补充扩展JSON Schema，它可以：

即使没定义Form Definition，内部在表单渲染部分，也会将JSONSchema转换成Form Definition，因为其结构更适合循环表单渲染

所以，整体架构如图

目前已经提供了 基础组件11个 (包含图片上传、编辑器等扩展组件)和 容器组件3个 ，未来还会根据情况继续增加，同时也支持自己扩展组件和规则。

vue elementui el-form rules动态验证的实例代码详解

一、介绍简介：在使用elementUIel-form中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。 图片介绍：1、在用户选择单选或多选时会有A,B,C,D,E五个选项2、在用户选择简答题时只会题干，答案以及解析选项（主要是通过v-if来进行判断）问题引入：当用户选择不同的题库时会产生不同的form表单选项，这个时候在进行表单提交验证的时候就需要根据不同试题类型进行判断，这个时候就需要两个rules来动态进行表单校验。 解决方法：在页面加载的时候在computed方法中进行动态判断直接返回赋值。 代码介绍：//elementui信息<el-form:model=addQueTableref=addQueTable:rules=addQueRulesList><el-form>//data中定义rulesupdateQusRulesSel:[];updateQusRules:[];//computed方法computed:{//自己定义的标识updateQusRulesList:function(){if(){;}else{;}}总结：在computed中进行值绑定，当该表单显示的时候就会触发(一开始是隐藏的)，如果一开始页面加载的时候就触发会无法进行值判断，从而报错。 其实能解决问题，通过该种方法。 二、最简单解决方法在el-form中定义的rules检验字段，如果你的rules中有字段通过v-if进行隐藏，rules是不会对隐藏的字段选项进行判断，只要定义一个完整的rules就行，v-if隐藏的部分不会进入校验方法中。 把简单的问题复杂化了！！！！！感谢该用户：总结以上所述是小编给大家介绍的vueelementuiel-formrules动态验证的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。 在此也非常感谢大家对脚本之家网站的支持！您可能感兴趣的文章:vueelementUItable自定义表头和行合并的实例代码vue+elementUI实现表单和图片上传及验证功能示例如何利用vue+vue-router+elementUI实现简易通讯录基于elementUI使用v-model实现经纬度输入的vue组件详细讲解如何创建,发布自己的VueUI组件库