e .制作具有数据收集、验证和提交功能的表格(VUE数据验证)

这次，我将为您带来VUE制造的具有数据收集、验证和提交功能的表格。VUE制作具有数据收集、验证和提交功能的表格有哪些注意事项？以下是实际案例。让我们来看看。

例子

https://raw . githubusercontent . com/xa boy/form -create/dev/images/sample 110 . jpg

固定

npm安装表单-创建者

git clone https://github.com/xaboy/form-create.gitcd表单-创建NPM安装简介

& lt！--导入Vue --& gt；& lt脚本src = & quotnode _ modules/vue/dist/vue . min . js & quot；& gt& lt/script & gt；& lt！--导入iview --& gt；& ltlink rel = & quot样式表& quothref = & quotnode _ modules/iview/dist/styles/iview . CSS & quot；rel = & quot外部无跟随& quot& gt& lt脚本src = & quotnode _ modules/iview/dist/iview . min . js & quot；& gt& lt/script & gt；& lt！省市三级联动-- json数据-->:& lt；脚本src = & quot/district/省_市_区. & quot& gt& lt/script & gt；& lt！--模拟数据-->:& lt；脚本src = & quotmock.js & quot& gt& lt/script & gt；& lt！--导入表单创建-->& lt脚本src = & quotdist/form -create . min . js & quot；& gt& lt/script & gt；立正！Iview版本请>:=2.9.2，否则可能有问题。

使用

let rules = window.mocknew Vue({ mounted:function(){ let $ f = this。$formCreate(mock，{ on submit:function(formData){ console . log(formData)；$ f . submit status({ loading:true })；} });//动态添加表单元素$f.append($r，& # 039；商品名称& # 039；);}})$formCreate参数

规则表单生成规则[inputRule，selectRule，& # 8230；]

初始化选项配置参数(详见底部的createOptions)

$f实例方法

FormData()获取表单的值。

GetValue(field)获取指定字段的值。

ChangeField(field，value)修改指定字段的值。

ResetFields()重置表单

Destroy()销毁表单

RemoveField(field)删除指定字段。

Fields()获取表单的所有字段名。

submit()表单在通过验证后将被提交，onSubmit事件将被触发。

验证(成功Fn，错误Fn)表单验证。如果验证通过，则成功执行fn；如果失败，执行errorFn。

validateField(field，callback)表单验证指定的字段。

$f.validateField(field，(errMsg)= & gt；{if(errMsg){ //TODO验证失败}else{ //TODO验证通过} })；Prepend(rule，field = undefined)在字段的字段前输入指定的表单元素。如果没有传入该字段，默认情况下它将是第一个。

$ f . prepend({ type:& quot；输入& quot，标题:& quot商品描述”，字段:& quot商品信息& quot，值:& quot"，道具:{ & quot键入& quot:& quot文本& quot，& quot占位符& quot:& quot请输入产品描述“，}，验证:[ {必填:真，消息:& # 039；请输入产品描述& # 039；，触发:& # 039；模糊& # 039；}, ], });Append(rule，field = undefined)在字段的字段前输入指定的表单元素。如果没有传入该字段，默认情况下它将是最后一个。

$ f . append({ type:& quot；输入& quot，标题:& quot商品描述”，字段:& quot商品信息& quot，值:& quot"，道具:{ & quot键入& quot:& quot文本& quot，& quot占位符& quot:& quot请输入产品描述“，}，验证:[ {必填:真，消息:& # 039；请输入产品描述& # 039；，触发:& # 039；模糊& # 039；}, ], });SubmitStatus(props)修改表单提交按钮的状态。

$f.submitStatus({ //按钮类型，可选值为主要、幻影、虚线、文本、信息、成功、警告、错误或无类型:& quot主要& quot，//按钮大小，可选值有大、小、默认或无大小:& quot大号& quot，//按钮形状，可选值为圆形或shape:未设置undefined。//打开时，按钮的长度为100%长:true。//设置按钮的原生类型，可选值为button、submit和reset html type:& quot；按钮& quot，//设置按钮禁用:false，//设置按钮图标的图标类型:& quotIOs -上传& quot，//按钮文本提示innerText:& quot；提交”，//将按钮设置为加载状态loading:false })btn.loading()让表单提交按钮进入加载状态。

Btn.finish()将表单提交按钮恢复到正常状态。

规则形成元素规则

隐藏的隐藏字段

hiddenRule:{ type:& quot；隐藏& quot，//必选！//字段名字段:& quotid & quot，//必选！//输入值value:& quot；14 & quot//必选！}输入输入框

输入:{类型:& quot输入& quot，//必选！//标签名称标题:& quot商品”，//必选！//字段名字段:& quot商品名称& quot，//必选！//输入值value:& quot；iphone 7 & quot，props: {//输入框类型，可选值为text，password，textarea，url，email，date " type & quot:& quot文本& quot，//必选！//是否显示清除按钮“clearable & quot:false，//将输入框设置为禁用状态“禁用& quot:false，//将输入框设置为只读“readonly & quot:false，//文本字段中的默认行数，仅在textarea类型“rows & quot:4，//自适应内容高度，只在textarea类型中有效，可以传入对象，如{minRows: 2，maxRows:6 } " autosize & quot；:false，//将用户的输入转换为数字类型“number & quot:false，//自动获得焦点“自动对焦& quot:false，//本机自动完成功能，可选值为off和on“自动完成& quot:& quot关闭& quot，//占位符文本" placeholder & quot:& quot请输入商品名称”，//输入框尺寸，可选值有大、小，默认或不设置"尺寸& quot:& quot默认& quot，//本机拼写检查属性“spellcheck & quot:false，}，event:{//Enter:(event)= >；{}，//设置icon属性后，点击图标时触发click:(event)= >；{}，//数据变化时触发变化:(event)= >；{}，//当输入框获得焦点时触发焦点:(event)= >；{}，//输入框失去焦点时触发模糊:(event)= >；{}，//Native keyup:(event)= > keyup:(event)= >；{}，//本机keydown:(event)= > keydown:(event)= >；{}，//本机按键:(event)= >按键:(event)= >；{}，}，验证:[ {必填:true，消息:& # 039；请输入商品名称& # 039；，触发:& # 039；模糊& # 039；}，]，}验证表单验证规则。具体配置见:https://github.com/yiminghe/async-validator。

无线电收音机盒

radio rule:{ type:& quot；收音机& quot，//必选！//标签名称标题:& quot是包邮吗”，//必填！//字段名字段:& quotis _邮资& quot，//必选！//输入值value:& quot；0 & gt；，//可选参数选项:[{ value:& quot；0 & gt；，标签:& quot不包邮”，禁用:false}，{ value:& quot；1 & quot，标签:& quotMail "，disabled:true}，]，//必选！Props: {//可选值为button或blank，为button“type & quot；:undefined，//单选框的大小，可选值有大、小，默认或未设置“size & quot:& quot默认& quot，//无论是否垂直排列，在按钮样式“vertical & quot:false，}，事件:{ //当选项状态发生变化时触发，返回当前状态。修改外部数据时不会触发变化: (...arg)= >；{}，}，验证:[]，}复选框

checkbox rule:{ type:& quot；复选框& quot，//必选！//标签名称标题:& quotLabel "，//必选！//字段名字段:& quot标签& quot，//必选！//输入值value:[" 1 & quot；，& quot2 & quot，& quot3 & quot]，//可选参数选项:[{ value:& quot；1 & quot，标签:& quot易于使用&quot，disabled:true}，{ value:& quot；2 & quot，标签:& quot方便”，disabled:false}，{ value:& quot；3 & quot，标签:& quot实用"，disabled:false}，{ value:& quot；4 & quot，标签:& quotValid "，disabled:false}，]，//必选！Props: {//多框组的大小，可选值有大、小，默认或不设置" size & quot:& quot默认& quot，}，event:{ //仅单独使用时有效。选项状态改变时触发，但外部数据修改时不触发: (...arg)= >；{}，}，验证:[]，}选择选择器

select rule:{ type:& quot；选择& quot，//必选！字段:& quotcate _ id & quot，//必选！标题:& quot产品分类”，//必输！//输入值value:[& quot；104 & quot，& quot105 & quot]，//可选参数选项:[{ & quot；价值& quot:& quot104 & quot，& quot标签& quot:& quot生态学&quot，& quot；禁用& quot:false}、{ & quot价值& quot:& quot105 & quot，& quot标签& quot:& quot新鲜水果”禁用& quot:false}、]、//必选！道具:{//支持多选吗”？多重& quot:true，//选项是否可以清除，只对单选“clearable & quot:false，//支持搜索”？可过滤& quot:true，//目前不支持远程搜索。//"远程& quot:false，//要使用远程搜索//" remote -方法& quot:函数，//远程搜索方法//" loading & quot；:false，//您当前是否正在远程搜索//？加载-文本& quot:& quot加载“，//远程搜索中的文本提示//选择框大小，可选值有大、小、缺省或留空。尺寸& quot:& quot默认& quot，//选择框的默认文本“placeholder & quot:& quot请选择“，//下拉列表为空时显示什么”not -found -text & quot；:& quot没有匹配的数据”，//弹出窗口的扩展方向，可选值是bottom和top " placement & quot:& quot底部& quot，//禁用”？禁用& quot:false，}，事件:{ //当所选选项发生变化时触发，返回value change:(checked)= >；{}，//当搜索词改变时触发& # 039；query -change & # 039；:(关键字)= & gt{}，}，验证:[]，}开关开关

switch rule:{ type:& quot；开关& quot，//必选！//标签名称标题:& quot上架了吗”，//必选！//字段名字段:& quotis _ show & quot，//必选！//输入值value:& quot；1 & quot，props: {//开关的大小，可选值有大，小，默认或不写。如果开关中使用两个汉字，建议使用大号。"尺寸& quot:& quot默认& quot，//禁用开关“disabled & quot:false，//选中时的值，这在使用1和0之类的值来确定它是否被选中时很有用:& quot1 & quot，//未选中时的值，这在使用1和0之类的值来确定是否选中时很有用:& quot0 & gt；，}，slot: {//自定义打开内容的显示方式open:& quot；在货架上"，//自定义显示屏关闭时的内容关闭:& quot下架”，}，事件:{ //切换时触发，返回当前状态0 | 1 change:(bool)= >；{}，}，验证:[]，}日期选择器日期选择器

date picker rule:{ type:& quot；日期选择器& quot，//必选！字段:& quot第_节& quot，//必选！标题:& quot活动日期"，//必输！//输入值，类型为daterange，datetimerange值为array [start _ value，end _ value]值:[& # 039；2018-02-20'、new Date()]、props: {//显示类型，可选值为Date、daterange、datetime、datetimerange、year、month " type & quot:& quot日期时间范围& quot，//必选！//演示文稿的日期格式“format & quot:& quotyyyy -MM-DD HH:mm:ss & quot；，//在日期选择器出现的地方，可选值为top top -start top -end bottom -start bottom -end left -start left -end right -start right -end " placement & quot；:& quotbottom-start&quot，//占位符文本" placeholder & quot:& quot请选择采集时间”，//是否显示底部控制栏。打开后，选择日期后，选择器不会主动关闭，只有在用户确认“确认”后才能关闭:false，// size，可选值为large，small，默认或未设置" size & quot:& quot默认& quot，//禁用选择器“disabled & quot:false，//是否显示清除按钮“clearable & quot:true，//完全只读，打开“readonly & quot:false，//可以在文本框中输入“吗？可编辑& quot:false，}，事件:{ //日期变化时触发。格式化日期，如2016-01-01 change:(value)= >；{}，//true | false日历弹出关闭时触发& # 039；open -改变& # 039；:(bool)= & gt；{}，//确认模式下有效或clearable = true，并触发clear:(...arg)= >；{}，}，验证:[]，}时间选择器时间选择器

time picker rule:{ type:& quot；时间选择器& quot，//必选！字段:& quotsection _ time & quot，//必选！标题:& quotActivity "，//必选！//输入值，类型为timerange值为array [start _ value，end _ value]值:[]，props:{//显示类型，可选值为time和timerange " type & quot:& quot时间范围& quot，//必选！//演示文稿的时间格式“format & quot:& quotHH:mm:ss & quot；，//下拉列表的时间间隔。数组的三项分别对应小时、分钟和秒。例如，当设置为[1，15]时，分钟将显示为:00，15，30，45。"步骤& quot:[]，//在时间选择器出现的地方，可选值为top top -start top -end bottom -start bottom -end left -start left -end right -start right -end " placement & quot；:& quotbottom-start&quot，//占位符文本" placeholder & quot:& quot请选择采集时间”，//是否显示底部控制栏。打开后，选择日期后，选择器不会主动关闭，只有在用户确认“确认”后才能关闭:false，// size，可选值为large，small，默认或未设置" size & quot:& quot默认& quot，//禁用选择器“disabled & quot:false，//是否显示清除按钮“clearable & quot:true，//完全只读，打开“readonly & quot:false，//可以在文本框中输入“吗？可编辑& quot:false，}，event:{ //时间变化时触发格式化时间，如09:41:00 change:(checked)= >；{}，//true | false浮动层弹出关闭时触发& # 039；open -改变& # 039；:(bool)= & gt；{}，//清除日期时触发clear:(...arg) = > {}，}，validate:[]，}InputNumber数字输入框

InputNumberRule:{ type:& quot；输入号码& quot，//必选！字段:& quot排序& quot，//必选！标题:& quotSort "，//必选！//输入值value: 1，props: {//最大值" max & quot:未定义，//最小值" min & quot:undefined，//每次变化的速度可以是一个十进制的“步长& quot:1，//输入框尺寸，可选值有大、小，默认或留空" size & quot:& quot默认& quot，//设置禁用状态“disabled & quot:false，//是否设置为只读”？只读:false，//是否可编辑”？可编辑& quot:true，//数值精度" precision & quot:0，}，事件:{ //值变化时回调，返回当前值变化:(value)= >；{}，//聚焦时触发焦点:(event)= >；{}，//失焦时触发模糊:(event)= >；{}，}，验证:[]，}颜色选择器颜色选择器

color picker rule:{ type:& quot；颜色选择器& quot，//必选！字段:& quot颜色& quot，//必选！标题:& quotColor "，//必选！//输入值value:& # 039；# ff7271 & # 039，props: {//支持透明选择“alpha & quot:false，//您支持颜色选择“hue & quot:true，//是否显示推荐的颜色预设“推荐& quot:false，// size，可选值为large，small，默认或未设置" size & quot:& quot默认& quot，//自定义颜色预置" colors & quot:[]，//颜色格式，可选值为hsl，hsv，hex，rgb，alpha开启时为rgb，其他为hex”；格式& quot:& quot十六进制& quot，}，事件:{ //绑定值变化时触发，返回当前值变化:(color)= >；{}，//焦点面板当前显示的颜色改变时触发& # 039；active -改变& # 039；:(color)= & gt；{}，}，验证:[]，}级联多级联动

cascader rule:{ type:& quot；卡斯卡德& quot，//必选！标题:& quot区域"，//必选！字段:& quot地址& quot，//必选！//输入值value:[& # 039；陕西省& # 039；,'Xi安& # 039；,'新城& # 039；]、props:{ //可选数据源，请参考示例描述数据:window.province || []，//必选！//选择后显示的函数用于自定义显示格式render format:label = >；label . join(& # 039；/ ')，//是否禁用选择器disabled:false，//是否支持清除clearable:true，//输入框占位符:& # 039；请选择& # 039；，//二级菜单展开方式，可选值为点击或悬停触发:& # 039；点击& # 039；，//此项为真时，点击时会改变各级菜单选项的值。详见上面例子changeOnSelect:false，//输入框的大小。可选值为“大”和“小”或“尺寸:未定义”未填写。//数据源需要标识为加载加载数据:()= >；{}，//是否支持搜索filterable: false，//搜索列表为空时会显示什么not found text:& # 039；没有匹配的数据& # 039；，//是否在体内放置弹性层？用在有固定的页签和表列时，建议添加该属性，不受父样式影响，达到更好的效果。transfer:false，}，event:{ //选择回调后，返回值为选择的值，SelectedData为选择项变化的具体数据:(value，selected data)= >；{}，//弹出窗口展开关闭时触发& # 039；visible -change & # 039；:bool = & gt{} }，验证:[]，}上传上传

上传规则:{类型:& quot上传& quot，//必选！字段:& quotpic & quot，//必选！标题:& quot转盘图"，//必选！//输入值，maxLength等于1时，为字符串；大于1时，为数组值:[& # 039；http://img 1 . touxiang . cn/uploads/2013 10 30/30-075657 _ 191 . jpg & # 039；,'http://img 1 . touxiang . cn/uploads/2013 10 30/30-075657 _ 191 . jpg & # 039；]，//输入值属性:{//上传控件的类型，可选值有select(点击选择)和drag(拖动支持)" type & quot:& quot选择& quot，//必选！//上传文件类型，可选值为image(图片上传)和file(文件上传)" uploadType & quot:& quot图像& quot，//必选！//上传的地址“action & quot:& quot"，//必选！//上传文件的字段名“name & quot:& quot"，//上传“数据”时附加的附加参数:{}，//设置上传请求头“headers & quot:{}，//是否支持多文件”？多重& quot:没错。//支持发送cookie凭证信息“withCredentials & quot:false，不支持///。showUploadList & quot:false，//是否显示上传文件列表//" default file list & quot；:[]，//默认上传文件列表//接受上传文件类型" accept & quot:& quot"，//支持的文件类型。与accept不同，format是标识文件的后缀，accept是输入标签的原生accept属性，在选择文件时会被过滤掉。您可以将这两种“格式”结合起来:[]，//文件大小限制，以kb " maxSize & quot:undefined，//可以上载的文件数" maxLength & quot:1，//上传文件前的钩子，参数是上传的文件，如果返回false或Promise，则停止上传“beforeUpload & quot:()= & gt{}，//文件上传时的钩子，返回字段为event，file，fileList " onProgress & quot:()= & gt{}，//文件上传成功时的钩子，返回字段为响应、文件、文件列表。如果需要将文件添加到文件列表中，可以在函数值“onSuccess”中返回它:function(){ return & # 039；http://img 1 . touxiang . cn/uploads/2013 10 30/30-075657 _ 191 . jpg & # 039；；}，//必选！//文件上传失败，返回字段为error，file，fileList " onError & quot:(错误，文件，文件列表)= & gt{}，//点击上传文件链接时点击挂钩，返回字段为file。您可以通过file.response " onPreview & quot:()= & gt{}，//删除文件时文件列表的钩子，返回字段为file，fileList " onRemove & quot:()= & gt{}，//文件格式验证失败时的钩子，返回字段为file，fileList " onFormatError & quot:()= & gt{}，//文件超出指定大小限制时的挂钩，返回字段为file，fileList " onExceededSize & quot:()= & gt{}，//辅助操作按钮的图标，如果设置为false，将不显示手柄图标:& # 039；爱奥尼亚& # 039；，//点击辅助操作按钮事件on handle:(src)= >；{}，//是否可以删除，如果设置为false，则删除按钮允许删除:true，}，}接受文件类型:https://developer . Mozilla . org/en-us/docs/web/html/element/input # attr -接受

全局createOptions配置

{ //Insert node，默认document.body el:null，//表单配置表单:{//是否开启内嵌表单模式inline:false，//表单字段标签的位置，可选值为left、right、top label position:& # 039；对& # 039；，//表单域标签的宽度。所有FormItem都将继承表单组件的label-width的值labelwidth: 125。//是否显示验证错误消息showMessage:true，//本机autocomplete属性，可选值为off或on autocomplete:& # 039；关& # 039；，}，//文件上传全局配置上传:{//hook before upload:()= >文件，参数为上传的文件，如果返回false或Promise，则停止上传前的上传:()= >；{}，//文件上传时的钩子，返回字段为event，file，file list on progress: (event，file，file list)= >；{}，//文件上传成功时的钩子，返回字段为response，file，fileList。如果需要将文件添加到文件列表中，可以在成功时返回值:(response，file，file list)= >；{//return & # 039；文件路径& # 039；；}，//文件上传失败时hook，返回字段为error，file，file list on error: (error，file，file list)= >；{}，//点击上传文件链接时点击挂钩，返回字段为file。可以通过file.response onpreview: (file) = >，获取服务器端返回数据；{}，//移除文件时文件列表的钩子，返回字段为file，file list on remove: (file，file list)= >；{}，//文件格式验证失败时的钩子，返回字段为file，filelist onformaterror: (file，file list)= >；{}，//文件超出指定大小限制时的挂钩，返回字段为file，file list on exceed size:(file，file list)= >；{}，//辅助操作按钮的图标，如果设置为false，将不显示手柄图标:& # 039；IOs -eye -outline & # 039；，//点击辅助操作按钮事件on handle:(src)= >；{}，//是否可以删除，如果设置为false，则删除按钮允许删除:true，}，//表单提交事件on submit:(formdata)= >；{}，//提交按钮配置。当设置为false时，不显示按钮submitBtn:{ //按钮类型。可选值为主要、幻影、虚线、文本、信息、成功、警告、错误或无类型:& quot主要& quot，//按钮大小，可选值有大、小、默认或无大小:& quot大号& quot，//按钮形状，可选值为圆形或shape:未设置undefined。//打开时，按钮的长度为100%长:true。//设置按钮的原生类型，可选值为button、submit和reset html type:& quot；按钮& quot，//设置按钮禁用:false，//设置按钮图标的图标类型:& quotIOs -上传& quot，//按钮文本提示innerText:& quot；提交”，//将按钮设置为加载状态loading:false，}}}相信你看完这个案例已经掌握了方法。更多精彩请关注即时码站其他相关文章！

推荐阅读:

如何用Vue操作DIV

使用Node.js转换文件编码格式