在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代码可直接运行在基于 Element 的 vue 项目中. github仓库   https://github.com/JakHuang/form-generator 码云仓库  https://gitee.com/mrhj/form-generator 演示地址 https://mrhj.gitee

介绍 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue 组件.结合内置17种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定. 文档 | github 演示项目: 开源的高品质微信商城 功能 自定义组件 可生成任何Vue组件 自带数据验证 轻松转换为表单组件 通过 JSON 生成表单 通过 Maker 生成表单 强大的API,可快速操作表单 双向数据绑定 事件扩展 局部更新 数据验证 栅格布局 内置组件17种常

element-ui Form表单验证规则全解 element的form表单非常好用,自带了验证规则,用起来很方便,官网给的案例对于一些普通场景完全没问题,不过一些复杂场景的验证还得自己多看文档摸索,自己经过数次爬坑 之后,总结了几种form表单的验证规则,为了便于阅读,验证规则是拆分的,完整的代码放在文末   1. 普通输入验证 <el-form-item label="活动名称" prop="name"> <!-- validate-event

ElementUi 表单验证 工作中常用到的JS验证 可以在pattern中书写正则,并且配合elementUI进行表单验证. pattern 属性规定用于验证输入字段的模式.模式指的是正则表达式. rules: { name:[{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 2, max: 5, message: '长度在 2 到 5 个字符' },{ pattern: /^[\u4E00-\u9FA5]+$/, me

form-builder PHP表单生成器,快速生成现代化的form表单.包含复选框.单选框.输入框.下拉选择框等元素以及省市区三级联动.时间选择.日期选择.颜色选择.树型.文件/图片上传等功能. 详细查看: Github地址 | Composer地址 本项目还在不断开发完善中,如有建议或问题请在这里提出 安装 composer require xaboy/form-builder 示例 例子 (TP框架) 版本1 编辑权限 $form = Form::create(Url::build('up

前几天记录了一下表单生成器(Form Builder)之表单数据存储结构mongodb篇,之后便想着伪造一些数据.为什么要伪造数据呢?说来惭愧,因为拖拉拽设计表单以及表单对应的列表的PC端和移动端该显示哪些字段并且是否支持搜索打印(即表单的列表配置)等一系列配置都还没有做,还有就是前面只说了表单相关的设计,设计完了之后就是要使用(录入数据等)对应的这些也还没有做……总之就是现在只有数据结构,但是又想写一下查询,所以只能伪造一些数据.又想着这些数据尽量真实,所以就想写点代码来伪造数据.在写代码的时

从这篇笔记开始,记录一下表单生成器(Form Builder)相关的一些东西,网上关于他的介绍有很多,这里就不解释了. 开篇说一下如何存储Form Builder生成的数据.

使用element-ui自带的表单校验,注意几个点: 1.el-form通过rules属性,绑定校验规则 2.el-form-item的prop属性,设置为需要校验的字段名 3.提交后二次校验 saveEdit(formName) { this.$refs[formName].validate((valid) =>{ if (valid){ this.editVisible = false } else{ this.$alert('有必填项未输入,请检查') } }) } element-ui文

最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周 就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正,多多交流才能共同进步! 1.问题 我们公司的项目比较大 表格 表单的页面都不胜数 ,基于此封装了一些 可复用的代码. 2.分析  vue给了我们不一样的前端代码体验  element ui 给我们一套功能强大的组件 减少了我们大量的开发时间 .双剑合璧 天下无敌!  但每个公司的代码风格不同  用户

在Vue项目中使用ElementUI表单时,同时又引入了vee-validate进行使用的时候,在浏览器上会出现这样的报错: [Vue warn]: The computed property "fields" is already defined in data. 这个的处理方式,就是在main.js文件中增加以下的配置: const config = { fieldsBagName: 'vee-fields' } Vue.use(VeeValidate, config) 这样就能解

前言 版本更新迭代的时候,需要用到一个动态表单的功能,ElementUI刚好有教程就改改用咯 步骤 代码 <!-- 手机副号动态表单框 --> <el-form-item v-for="(domains, index) in formData.domains" :key="index" :prop="'domains.'+ index +'.value'" :rules="[ { required: true, mes

整体思路: 1:利用element-ui的栅格实现小分辨率和大分辨率的适配 2:模拟一组数据,从中筛选出 绑定各个表单值的对象   以及生成验证规则对象 3:在script标签内 .data()外,自定义验证规则,这样在created钩子中(也就是生成验证对象时)就可以将这些自定义的规则加入进去 下面是整了一天的代码: <template> <div class="box1"> <div style="margin-top:400px;"

使用elementUI的el-form组件进行查询时,当输入框仅有一项时,回车自动提交表单,浏览器会刷新页面: 原因:由于当表单只有一个文本框时,按下回车将会触发表单的提交事件, 从而导致页面刷新. 1 <el-form :inline="true" :model="getForm" class="demo-form-inline"> 2 <el-form-item label="科目名称"> 3 &l

问题细化一下是这样的:比如我有一个用来修改数据的表单,第一条数据是{name: 'Xixi', age: 12},打开表单后就有两个输入框分别填的是Xixi和12,此时我修改Xixi为Haha,调用this.$refs[].resetFields()后,该表单数据恢复为Xixi和12,这是没问题的.现在我要修改第二条数据{name: 'Dog', age: 4},打开表单后将Dog修改为Cat,此时我再次调用this.$refs[].resetFields(),表单数据理想情况应该被重置为{na

(注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的)   表单校验是前端开发过程中最常用到的功能之一,根据个人的工作经验总结在此对表单校验功能的基础用法进行整理说明~ 如下代码是Form表单校验的demo示例: <template> <div id="demo"> <el-dialog title="表单校验示例" :close-on-click-modal="false&

基本上按照文档上提供的方式做就没啥大问题 , 我遇到的问题是 , 自定义以后不显示小红星了 <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm"> <el-form-item label="密码"

这篇文章终于回到了正轨:为mongodb伪造数据.之前的随机数.随机车牌照.随机时间还有这篇笔记中的获取指定长度的中文字符串,都是为这篇笔记做准备.看一下我们的准备(基础代码) // 1.获取指定范围随机数-包括最大值和最小值 var getRangeRandomNumber = function(num1,num2){ num1 = Number.isInteger(num1) ? num1: 0; num2 = Number.isInteger(num2) ? num2: 0; var mi

1.比如重写在表单自带验证的样式 .el-form-item__error是对应是的文字的类名,图标我是通过伪元素插进去的 下面是伪元素代码 基本上要重写样式的,到控制台看样式名,因为是封装的,所以有些样式写在外面是不起作用的

经过排查,如果自定义验证中,每种情况都要写明确和有回调函数callback var validatePhone = (rule, value, callback) => { const reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/; if (value!== "") { if (value === "") { callback(new Err

复杂表单如下: <el-form size="mini" :rules="rules" :model="form" label-width="120px" label-position="right" > <el-form-item label="活动名称" prop="name" :rules="[{required:true,messa

this.$refs['activityForm'].resetFields(); 只会重置之前表单的内容,并不会清空 只需在关闭弹框的cancel方法中写上重置表单的方法即可 cancel() { this.$refs.formData.resetFields(); } 若首先编辑,会初始化值,再新增resetFields无效,需做如下处理: modifyDeptDialog () {      let selectRow = this.$refs.table.store.states.cur