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

背景 目前市场上有很多表单美化的UI,做的都挺不错,但是他们都有一个共同点,那就是90%以上都是前端工程师开发的,导致我们引入这些UI的时候,很难和程序绑定.所以作为程序员的我,下了一个决定!我要自己写UI! 所以,我便自己操刀,花了半天的时间终于写了Monk.UI!刚好在Monk.Soul项目中用上(Monk.Soul是一基于ASP.NET MVC 5+SqlSugar 3.0开发的无码系统,包涵颗粒化权限控制,工作流,社区,项目管理等功能,目前完成了70%,也即将开源,敬请期待!该项目也完全

特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便定制 — 用HTML 和 CSS 即可为其设置样式 (多套皮肤) 5.体积小巧 — gzip压缩后只有1 kb 6.25 种参数 用来定制复选框(checkbox)和单选按钮(radio button) 7.8 个回调事件 用来监听输入框的状态 8.7个方法 用来通过编程方式控制输入框的状态 9.能

表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能.这篇文章向大家推荐几款很棒的 JavaScript 表单美化和验证插件. 您可能感兴趣的相关文章 精心挑选12款优秀 jQuery Ajax 分页插件 经验分享:10个简单实用的 jQuery 代码片段 分享8款效果精美的 jQuery 加载进度条插件 期待已久的2012年度最佳 jQuery 插

iCheck   特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 - 包括 桌面和移动设备 2.支持触摸设备 - iOS.Android.BlackBerry.Windows Phone等系统 4.方便定制 - 用HTML 和 CSS 即可为其设置样式 (多套皮肤) 5.体积小巧 - gzip压缩后只有1 kb 6.25 种参数 用来定制复选框(checkbox)和单选按钮(radio button) 7.8 个回调事件 用来监听输入框的状态 8.7个方法 用来通过编程方式控制输

Niceforms Niceforms是一款独立的表单美化工具,当前版本为2.0 官方主页:http://www.emblematiq.com/lab/niceforms/ 官方演示:http://www.emblematiq.com/lab/niceforms/demo/niceforms.html GitHub:https://github.com/emblematiq/Niceforms 使用方法,在页面头部引入以下脚本及样式即可: 复制代码 代码如下: <link href="ni

闲聊: 今天小颖在跟着慕课网学习:表单美化 看完了自己跟着敲了敲,顺便做个笔记嘻嘻,好记性不如烂笔头,脑子记不住,就写成笔记,以后也方便查看,嘻嘻. 正文: 1.表单美化_单选按钮篇 2.表单美化_复选按钮篇 3.表单优化_文本框篇 表单美化_单选按钮篇 目录: 效果图:

最近正在做php第二阶段的项目,由于我们小组做的是游戏评论网站,所以需要用到评分评论的页面,这里我做了个星级评论表单 1.首先,我们需要引入一个jQuery文件,代码如下: /*! * jQuery JavaScript Library v1.5.1 * http://jquery.com/ * * Copyright 2011, John Resig * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery

本文转自:http://www.exp99.com/jswz/f2e/1408696007_34.html iCheck   特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便定制 — 用HTML 和 CSS 即可为其设置样式 (多套皮肤) 5.体积小巧 — gzip压缩后只有1 kb 6.25 种参数 用来定制复选框(checkbox)和单选按钮

 这是一款效果很精美炫酷的jQuery和CSS3联系方式表单美化插件.大多数站点上都有让用户填写的联系方式表单,一个设计良好的表单可以大大的提升用户的体验度.该表单美化插件在原生HTML表单的基础上进行加工.并使用jQuery来制作label动画,使表单样式更加慷慨得体.  这个表单美化插件中包括了经常使用的表单元素:输入框.下拉框.单选button.复选框和文本框. 在线演示:http://www.htmleaf.com/Demo/201503121507.html 下载地址:http://w

elementUI表单验证非常方便,我们直奔主题: <template> <el-form ref="orderForm" :model="orderForm" :rules="addRules" label-width="100px"> <el-form-item label="联系人:" prop="contact"> <el-input v

elementUI表单嵌套日期时间选择时间后报错 <el-form-item label="起始结束时间:" required prop="startime"> <el-date-picker size="small" v-model="form.startime" type="datetimerange" range-separator="至" start-place

multipart/form-data 在使用包含文件上传控件的表单时,必须使用autocomplete="on" 自动补全功能novalidate 不验证 <form enctype="multipart/form-data" novalidate autocomplete="on"></form> placeholder required 必填autofocus 默认聚焦pattern 正则验证 <input t

element-ui 表单v-if 很多人会遇到无法验证的问题,网上很多是在el-form-item标签前加一个div然后把v-if拿到div上去像这样 <div v-if="addchannel.region=='postgresql'||addchannel.region=='mongodb'||addchannel.region=='mysql'||addchannel.region=='influxdb'" class="notlastchildren notl

1.前言   Element-ui表单校验规则,使得错误提示可以直接在form-item下面显示,无需弹出框,因此还是很好用的.   我在做了登录页面的表单校验后,一度以为我已经很了解表单的校验规则.但我在深入使用表单校验规则时,遇到下列问题: 如何判断属性值是否在某个范围内,且这个范围可以任意指定? 如何判断属性值是否为某个值? 多个属性联合校验,当前属性的校验规则依赖于另一个属性的值,如何进行校验?如注册页面,ID类型有邮箱地址.手机号和身份证号码,选择不同类型,IDValue属性的校验规则

elementUI表单嵌套表格并对每行进行校验 elementUI 表单嵌套表格并进行校验. 目录 效果展示 代码链接 关键代码 完整代码 效果展示 先看看这是不是需要的效果^_^ ​ 如图,ElementUI 表单里嵌套了表格,表格内每行能进行[保存][新增][编辑][删除][重置]等操作,同时可以对每行的某些字段进行校验(而不是整个表单校验!),这种需求很常见,所以记录下来. 代码链接 gitee地址 关键代码 表格数据 // 数据格式必须是[对象嵌套数组],[form]绑定表单,[list

前些天我们讲了下单选按钮的美化今天来做表单元素多选按钮的美化.我们的想法是:利用多选按钮是否被选中和是否不给选择的特性来为按钮的父元素添加对应的样式,就是说用什么的样式是由按钮的状态来决定. 用到的图片 效果 代码我就不具体一步一步做了有兴趣的童鞋可以参见下我第一篇美化表单的文章http://blog.csdn.net/qianqianyixiao1/article/details/40422769 首先我们用原生的javascript来做这个效果 需要注意的是IE8以下是不支持getEleme

最近很多人问怎么美化表单的元素,大家都知道表单元素在各个浏览器中的表现不一,反正也是特别的丑,那么问题就来了,我们能自己设计表单元素的外观么?答案是可以的,现在我们就来试试吧.我们用两种方式来实现这一效果,一种是用原生的javascript 和一种是现在特别流行的javascript框架jQuery来实现这一效果. 首先我们先来用javascript的方式,不了解原生javascript的童鞋可以跳过这个直接进去jQuery的部分.javascript是前端的基础建议大家还是要学习下原生java

1.设计校验方式: 我们表单验证的rules一般封装一个单独的js文件,比如我之前写的这个博客: ElementUI使用问题记录:设置路由+iconfont图标+自定义表单验证 可以修改下:公共的校验写在公共里面,个性化的校验写在methods里面 :rules="[rules.password,{validator:valPwd,trigger:'blur'}]" //先导入公共验证文件 import {validator,getVeriCode} from '@/utils' //

element-ui Form表单验证 最近刚好使用了element-ui的form表单,官网只提供的示例,这里把一些常用的验证记录下来,方便后期查找最终的效果是这样的, 这个表单里还加入了一下其他组件配合使用,这里为了简洁,就不放那么多代码,如果你刚好有用到其他功能的可以留言发其他功能的源码 // 这是HTML部分 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label

在使用vue element-ui form表单渲染的时候,会遇到这样的数据结构: { "title":''123455, "email":'123456@qq.com', "list": [ { "id": "quis consequat culpa ut pariatur", "name": "et quis irure dolore ullamco", &quo