这次给大家带来vue做出带有数据收集、校验和提交功能表单，vue做出带有数据收集、校验和提交功能表单的注意事项有哪些，下面就是实战案例，一起来看一下。
示例
https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg
安装
npm install form-create
or
git clone https://github.com/xaboy/form-create.git
cd form-create
npm install
引入
<!-- import vue -->
<script src="node_modules/vue/dist/vue.min.js"></script>
<!-- import iview -->
<link rel="stylesheet" href="node_modules/iview/dist/styles/iview.css" rel="external nofollow" >
<script src="node_modules/iview/dist/iview.min.js"></script>
<!-- 省市区三级联动json数据 -->
<script src="/district/province_city_area.js"></script>
<!-- 模拟数据 -->
<script src="mock.js"></script>
<!-- import formcreate -->
<script src="dist/form-create.min.js"></script>
注意! iview版本请>=2.9.2,否则可能存在问题
使用
let rules = window.mock;
new vue({
mounted:function(){
let $f = this.$formcreate(mock,
{
onsubmit:function (formdata) {
console.log(formdata);
$f.submitstatus({loading:true});
}
});
//动态添加表单元素
$f.append($r,'goods_name');
}
})
$formcreate 参数
rules 表单生成规则 [inputrule,selectrule,...]
options 初始化配置参数 (详细见底部 createoptions)
$f 实例方法
formdata() 获取表单的value
getvalue(field) 获取指定字段的value
changefield(field,value) 修改指定字段的value
resetfields() 重置表单
destroy() 销毁表单
removefield(field) 删除指定字段
fields() 获得表单所有字段名称
submit() 表单验证通过后提交表单,触发onsubmit事件
validate(successfn,errorfn) 表单验证,如果验证通过执行successfn,未通过则执行errorfn
validatefield(field,callback) 表单验证指定字段
$f.validatefield(field,(errmsg)=>{
if(errmsg){
//todo 验证未通过
}else{
//todo 验证通过
}
});
prepend(rule,field = undefined) 在field的字段之前输入指定表单元素,不传入field默认在第一个
$f.prepend({
type:input,
title:商品简介,
field:goods_info,
value:,
props: {
type: text,
placeholder: 请输入商品简介,
},
validate:[
{ required: true, message: '请输入商品简介', trigger: 'blur' },
],
});
append(rule,field = undefined) 在field的字段之前输入指定表单元素,不传入field默认在最后一个
$f.append({
type:input,
title:商品简介,
field:goods_info,
value:,
props: {
type: text,
placeholder: 请输入商品简介,
},
validate:[
{ required: true, message: '请输入商品简介', trigger: 'blur' },
],
});
submitstatus(props) 修改表单提交按钮状态
$f.submitstatus({
//按钮类型，可选值为primary、ghost、dashed、text、info、success、warning、error或者不设置
type:primary,
//按钮大小，可选值为large、small、default或者不设置
size:large,
//按钮形状，可选值为circle或者不设置
shape:undefined,
//开启后，按钮的长度为 100%
long:true,
//设置button原生的type，可选值为button、submit、reset
htmltype:button,
//设置按钮为禁用状态
disabled:false,
//设置按钮的图标类型
icon:ios-upload,
//按钮文字提示
innertext:提交,
//设置按钮为加载中状态
loading:false
})
btn.loading() 让表单提交按钮进入loading状态
btn.finish() 让表单提交按钮恢复正常状态
rules 表单元素规则
hidden 隐藏字段
hiddenrule:
{
type:hidden,//必填!
//字段名称
field:id, //必填!
//input值
value:14 //必填!
}
input 输入框
inputrule :
{
type:input,//必填!
//label名称
title:商品名称,//必填!
//字段名称
field:goods_name,//必填!
//input值
value:iphone 7,
props: {
//输入框类型，可选值为 text、password、textarea、url、email、date
type: text, //必填!
//是否显示清空按钮
clearable:false,
//设置输入框为禁用状态
disabled: false,
//设置输入框为只读
readonly: false,
//文本域默认行数，仅在 textarea 类型下有效
rows: 4,
//自适应内容高度，仅在 textarea 类型下有效，可传入对象，如 { minrows: 2, maxrows: 6 }
autosize: false,
//将用户的输入转换为 number 类型
number: false,
//自动获取焦点
autofocus: false,
//原生的自动完成功能，可选值为 off 和 on
autocomplete: off,
//占位文本
placeholder: 请输入商品名称,
//输入框尺寸，可选值为large、small、default或者不设置
size: default,
//原生的 spellcheck 属性
spellcheck: false,
},
event:{
//按下回车键时触发
enter:(event)=>{},
//设置 icon 属性后，点击图标时触发
click:(event)=>{},
//数据改变时触发
change:(event)=>{},
//输入框聚焦时触发
focus:(event)=>{},
//输入框失去焦点时触发
blur:(event)=>{},
//原生的 keyup 事件
keyup:(event)=>{},
//原生的 keydown 事件
keydown:(event)=>{},
//原生的 keypress 事件
keypress:(event)=>{},
},
validate:[
{ required: true, message: '请输入goods_name', trigger: 'blur' },
],
}
validate 表单验证规则，具体配置查看 : https://github.com/yiminghe/async-validator
radio 单选框
radiorule :
{
type:radio,//必填!
//label名称
title:是否包邮,//必填!
//字段名称
field:is_postage,//必填!
//input值
value:0,
//可选参数
options:[
{value:0,label:不包邮,disabled:false},
{value:1,label:包邮,disabled:true},
],//必填!
props: {
//可选值为 button 或不填，为 button 时使用按钮样式
type:undefined,
//单选框的尺寸，可选值为 large、small、default 或者不设置
size:default,
//是否垂直排列，按钮样式下无效
vertical:false,
},
event:{
//在选项状态发生改变时触发，返回当前状态。通过修改外部的数据改变时不会触发
change:(...arg)=>{},
},
validate:[],
}
checkbox 复选框
checkboxrule :
{
type:checkbox,//必填!
//label名称
title:标签,//必填!
//字段名称
field:label,//必填!
//input值
value:[
1,2,3
],
//可选参数
options:[
{value:1,label:好用,disabled:true},
{value:2,label:方便,disabled:false},
{value:3,label:实用,disabled:false},
{value:4,label:有效,disabled:false},
],//必填!
props: {
//多选框组的尺寸，可选值为 large、small、default 或者不设置
size:default,
},
event:{
//只在单独使用时有效。在选项状态发生改变时触发，通过修改外部的数据改变时不会触发
change:(...arg)=>{},
},
validate:[],
}
select 选择器
selectrule :
{
type: select,//必填!
field: cate_id,//必填!
title: 产品分类,//必填!
//input值
value: [104,105],
//可选参数
options: [
{value: 104, label: 生态蔬菜, disabled: false},
{value: 105, label: 新鲜水果, disabled: false},
],//必填!
props: {
//是否支持多选
multiple: true,
//是否可以清空选项，只在单选时有效
clearable: false,
//是否支持搜索
filterable: true,
// 暂不支持远程搜索
// remote: false, //是否使用远程搜索
// remote-method:function, //远程搜索的方法
// loading: false, //当前是否正在远程搜索
// loading-text: 加载中, //远程搜索中的文字提示
//选择框大小，可选值为large、small、default或者不填
size:default,
//选择框默认文字
placeholder: 请选择,
//当下拉列表为空时显示的内容
not-found-text: 无匹配数据,
//弹窗的展开方向，可选值为 bottom 和 top
placement: bottom,
//是否禁用
disabled: false,
},
event:{
//选中的option变化时触发，返回 value
change:(checked)=>{},
//搜索词改变时触发
'query-change':(keyword)=>{},
},
validate:[],
}
switch 开关
switchrule :
{
type:switch,//必填!
//label名称
title:是否上架,//必填!
//字段名称
field:is_show,//必填!
//input值
value:1,
props: {
//开关的尺寸，可选值为large、small、default或者不写。建议开关如果使用了2个汉字的文字，使用 large。
size:default,
//禁用开关
disabled:false,
//选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用
truevalue:1,
//没有选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用
falsevalue:0,
},
slot: {
//自定义显示打开时的内容
open:上架,
//自定义显示关闭时的内容
close:下架,
},
event:{
//开关变化时触发，返回当前的状态 0 | 1
change:(bool)=>{},
},
validate:[],
}
datepicker 日期选择器
datepickerrule :
{
type: datepicker,//必填!
field: section_day,//必填!
title: 活动日期,//必填!
//input值, type为daterange,datetimerange value为数组 [start_value,end_value]
value: ['2018-02-20', new date()],
props: {
//显示类型，可选值为 date、daterange、datetime、datetimerange、year、month
type: datetimerange,//必填!
//展示的日期格式
format: yyyy-mm-dd hh:mm:ss,
//日期选择器出现的位置，可选值为toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end
placement: bottom-start,
//占位文本
placeholder:请选择获得时间,
//是否显示底部控制栏，开启后，选择完日期，选择器不会主动关闭，需用户确认后才可关闭
confirm:false,
//尺寸，可选值为large、small、default或者不设置
size:default,
//是否禁用选择器
disabled:false,
//是否显示清除按钮
clearable:true,
//完全只读，开启后不会弹出选择器
readonly:false,
//文本框是否可以输入
editable:false,
},
event:{
//日期发生变化时触发,已经格式化后的日期，比如 2016-01-01
change:(value)=>{},
//弹出日历和关闭日历时触发 true | false
'open-change':(bool)=>{},
//在 confirm 模式或 clearable = true 时有效，在清空日期时触发
clear:(...arg)=>{},
},
validate:[],
}
timepicker 时间选择器
timepickerrule :
{
type: timepicker,//必填!
field: section_time,//必填!
title: 活动时间,//必填!
//input值, type为timerange value为数组 [start_value,end_value]
value: [],
props: {
//显示类型，可选值为 time、timerange
type: timerange, //必填!
//展示的时间格式
format: hh:mm:ss,
//下拉列表的时间间隔，数组的三项分别对应小时、分钟、秒。例如设置为 [1, 15] 时，分钟会显示：00、15、30、45。
steps: [],
//时间选择器出现的位置，可选值为toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end
placement: bottom-start,
//占位文本
placeholder:请选择获得时间,
//是否显示底部控制栏，开启后，选择完日期，选择器不会主动关闭，需用户确认后才可关闭
confirm:false,
//尺寸，可选值为large、small、default或者不设置
size:default,
//是否禁用选择器
disabled:false,
//是否显示清除按钮
clearable:true,
//完全只读，开启后不会弹出选择器
readonly:false,
//文本框是否可以输入
editable:false,
},
event:{
//时间发生变化时触发 已经格式化后的时间，比如 09:41:00
change:(checked)=>{},
//弹出浮层和关闭浮层时触发 true | false
'open-change':(bool)=>{},
//在清空日期时触发
clear:(...arg)=>{},
},
validate:[],
}
inputnumber 数字输入框
inputnumberrule :
{
type: inputnumber,//必填!
field: sort,//必填!
title: 排序,//必填!
//input值
value: 1,
props: {
//最大值
max: undefined,
//最小值
min: undefined,
//每次改变的步伐，可以是小数
step: 1,
//输入框尺寸，可选值为large、small、default或者不填
size:default,
//设置禁用状态
disabled:false,
//是否设置为只读
readonly:false,
//是否可编辑
editable:true,
//数值精度
precision:0,
},
event:{
//数值改变时的回调，返回当前值
change:(value)=>{},
//聚焦时触发
focus:(event)=>{},
//失焦时触发
blur:(event)=>{},
},
validate:[],
}
colorpicker 颜色选择器
colorpickerrule :
{
type: colorpicker,//必填!
field: color,//必填!
title: 颜色,//必填!
//input值
value: '#ff7271',
props: {
//是否支持透明度选择
alpha: false,
//是否支持色彩选择
hue: true,
//是否显示推荐的颜色预设
recommend: false,
//尺寸，可选值为large、small、default或者不设置
size:default,
//自定义颜色预设
colors:[],
//颜色的格式，可选值为 hsl、hsv、hex、rgb,开启 alpha 时为 rgb，其它为 hex
format:hex,
},
event:{
//当绑定值变化时触发，返回当前值
change:(color)=>{},
//聚焦时触发 面板中当前显示的颜色发生改变时触发
'active-change':(color)=>{},
},
validate:[],
}
cascader 多级联动
cascaderrule:
{
type:cascader,//必填!
title:所在区域,//必填!
field:address,//必填!
//input值
value:['陕西省','西安市','新城区'],
props:{
//可选项的数据源，格式参照示例说明
data:window.province || [],//必填!
//选择后展示的函数，用于自定义显示格式
renderformat:label => label.join(' / '),
//是否禁用选择器
disabled:false,
//是否支持清除
clearable:true,
//输入框占位符
placeholder:'请选择',
//次级菜单展开方式，可选值为 click 或 hover
trigger:'click',
//当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的示例
changeonselect:false,
//输入框大小，可选值为large和small或者不填
size:undefined,
//动态获取数据，数据源需标识 loading
loaddata:()=>{},
//是否支持搜索
filterable:false,
//当搜索列表为空时显示的内容
notfoundtext:'无匹配数据',
//是否将弹层放置于 body 内，在 tabs、带有 fixed 的 table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果
transfer:false,
},
event:{
//选择完成后的回调，返回值 value 即已选值 value，selecteddata 为已选项的具体数据
change:(value, selecteddata)=>{},
//展开和关闭弹窗时触发
'visible-change':bool=>{}
},
validate:[],
}
upload 上传
uploadrule :
{
type: upload,//必填!
field: pic,//必填!
title: 轮播图,//必填!
//input值,当maxlength等与1时值为字符串,大于1时值为数组
value: ['http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg','http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg'], //input值
props: {
//上传控件的类型，可选值为 select（点击选择），drag（支持拖拽）
type:select, //必填!
//上传文件类型，可选值为 image（图片上传），file（文件上传）
uploadtype:image, //必填!
//上传的地址
action: , //必填!
//上传的文件字段名
name:,
//上传时附带的额外参数
data:{},
//设置上传的请求头部
headers: {},
//是否支持多选文件
multiple: true,
//支持发送 cookie 凭证信息
withcredentials:false,
//不支持
// showuploadlist:false, //是否显示已上传文件列表
// defaultfilelist:[], // 默认已上传的文件列表
//接受上传的文件类型
accept:,
//支持的文件类型，与 accept 不同的是，format 是识别文件的后缀名，accept 为 input 标签原生的 accept 属性，会在选择文件时过滤，可以两者结合使用
format:[],
//文件大小限制，单位 kb
maxsize:undefined,
//可上传文件数量
maxlength:1,
//上传文件之前的钩子，参数为上传的文件，若返回 false 或者 promise 则停止上传
beforeupload:()=>{},
//文件上传时的钩子，返回字段为 event, file, filelist
onprogress:()=>{},
//文件上传成功时的钩子，返回字段为 response, file, filelist,若需有把文件添加到文件列表中,在函数值返回即可
onsuccess:function () {
return 'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg';
}, //必填!
//文件上传失败时的钩子，返回字段为 error, file, filelist
onerror:(error, file, filelist)=>{},
//点击已上传的文件链接时的钩子，返回字段为 file， 可以通过 file.response 拿到服务端返回数据
onpreview:()=>{},
//文件列表移除文件时的钩子，返回字段为 file, filelist
onremove:()=>{},
//文件格式验证失败时的钩子，返回字段为 file, filelist
onformaterror:()=>{},
//文件超出指定大小限制时的钩子，返回字段为 file, filelist
onexceededsize:()=>{},
//辅助操作按钮的图标 ,设置为false将不显示
handleicon:'ionic',
//点击辅助操作按钮事件
onhandle:(src)=>{},
//是否可删除,设置为false是不显示删除按钮
allowremove:true,
},
}
accept 文件类型： https://developer.mozilla.org/en-us/docs/web/html/element/input#attr-accept
全局配置 createoptions
{
//插入节点,默认document.body
el:null,
//form配置
form:{
//是否开启行内表单模式
inline:false,
//表单域标签的位置，可选值为 left、right、top
labelposition:'right',
//表单域标签的宽度，所有的 formitem 都会继承 form 组件的 label-width 的值
labelwidth:125,
//是否显示校验错误信息
showmessage:true,
//原生的 autocomplete 属性，可选值为 off 或 on
autocomplete:'off',
},
//文件上传全局配置
upload:{
//上传文件之前的钩子，参数为上传的文件，若返回 false 或者 promise 则停止上传
beforeupload:()=>{},
//文件上传时的钩子，返回字段为 event, file, filelist
onprogress:(event, file, filelist)=>{},
//文件上传成功时的钩子，返回字段为 response, file, filelist,若需有把文件添加到文件列表中,在函数值返回即可
onsuccess:(response, file, filelist)=>{
// return 'filepath';
},
//文件上传失败时的钩子，返回字段为 error, file, filelist
onerror:(error, file, filelist)=>{},
//点击已上传的文件链接时的钩子，返回字段为 file， 可以通过 file.response 拿到服务端返回数据
onpreview:(file)=>{},
//文件列表移除文件时的钩子，返回字段为 file, filelist
onremove:(file, filelist)=>{},
//文件格式验证失败时的钩子，返回字段为 file, filelist
onformaterror:(file, filelist)=>{},
//文件超出指定大小限制时的钩子，返回字段为 file, filelist
onexceededsize:(file, filelist)=>{},
//辅助操作按钮的图标 ,设置为false将不显示
handleicon:'ios-eye-outline',
//点击辅助操作按钮事件
onhandle:(src)=>{},
//是否可删除,设置为false是不显示删除按钮
allowremove:true,
},
//表单提交事件
onsubmit:(formdata)=>{},
//提交按钮配置,设置为false时不显示按钮
submitbtn:{
//按钮类型，可选值为primary、ghost、dashed、text、info、success、warning、error或者不设置
type:primary,
//按钮大小，可选值为large、small、default或者不设置
size:large,
//按钮形状，可选值为circle或者不设置
shape:undefined,
//开启后，按钮的长度为 100%
long:true,
//设置button原生的type，可选值为button、submit、reset
htmltype:button,
//设置按钮为禁用状态
disabled:false,
//设置按钮的图标类型
icon:ios-upload,
//按钮文字提示
innertext:提交,
//设置按钮为加载中状态
loading:false,
}
}
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
怎样使用vue操作div
利用node.js进行文件编码格式转换
以上就是vue做出带有数据收集、校验和提交功能表单的详细内容。