【移動應用開發(fā)技術】VUE實現(xiàn)帶有數據收集、校驗和提交功能表單的注意事項有哪些

【移動應用開發(fā)技術】VUE實現(xiàn)帶有數據收集、校驗和提交功能表單的注意事項有哪些

在下給大家分享一下VUE實現(xiàn)帶有數據收集、校驗和提交功能表單的注意事項有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！這次給大家?guī)鞻UE做出帶有數據收集、校驗和提交功能表單，VUE做出帶有數據收集、校驗和提交功能表單的注意事項有哪些示例安裝npm

install

form-createORgit

clone

/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>

<!--

省市區(qū)三級聯(lián)動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});

}

});

//動態(tài)添加表單元素

$f.append($r,'goods_name');

}

})$formCreate參數rules表單生成規(guī)則[inputRule,selectRule,...]options初始化配置參數(詳細見底部createOptions)$f實例方法formData()獲取表單的valuegetValue(field)獲取指定字段的valuechangeField(field,value)修改指定字段的valueresetFields()重置表單destroy()銷毀表單removeField(field)刪除指定字段fields()獲得表單所有字段名稱submit()表單驗證通過后提交表單,觸發(fā)onSubmit事件validate(successFn,errorFn)表單驗證,如果驗證通過執(zhí)行successFn,未通過則執(zhí)行errorFnvalidateField(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)修改表單提交按鈕狀態(tài)$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",

//設置按鈕為禁用狀態(tài)

disabled:false,

//設置按鈕的圖標類型

icon:"ios-upload",

//按鈕文字提示

innerText:"提交",

//設置按鈕為加載中狀態(tài)

loading:false

})btn.loading()讓表單提交按鈕進入loading狀態(tài)btn.finish()讓表單提交按鈕恢復正常狀態(tài)rules表單元素規(guī)則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,

//設置輸入框為禁用狀態(tài)

"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:{

//按下回車鍵時觸發(fā)

enter:(event)=>{},

//設置

icon

屬性后，點擊圖標時觸發(fā)

click:(event)=>{},

//數據改變時觸發(fā)

change:(event)=>{},

//輸入框聚焦時觸發(fā)

focus:(event)=>{},

//輸入框失去焦點時觸發(fā)

blur:(event)=>{},

//原生的

keyup

事件

keyup:(event)=>{},

//原生的

keydown

事件

keydown:(event)=>{},

//原生的

keypress

事件

keypress:(event)=>{},

},

validate:[

{

required:

true,

message:

'請輸入goods_name',

trigger:

'blur'

},

],

}validate表單驗證規(guī)則，具體配置查看:/yiminghe/async-validatorradio單選框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:{

//在選項狀態(tài)發(fā)生改變時觸發(fā)，返回當前狀態(tài)。通過修改外部的數據改變時不會觸發(fā)

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:{

//只在單獨使用時有效。在選項狀態(tài)發(fā)生改變時觸發(fā)，通過修改外部的數據改變時不會觸發(fā)

change:(...arg)=>{},

},

validate:[],

}select選擇器selectRule

:

{

type:

"select",//必填!

field:

"cate_id",//必填!

title:

"產品分類",//必填!

//input值

value:

["104","105"],

//可選參數

options:

[

{"value":

"104",

"label":

"生態(tài)蔬菜",

"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變化時觸發(fā)，返回

value

change:(checked)=>{},

//搜索詞改變時觸發(fā)

'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:{

//開關變化時觸發(fā)，返回當前的狀態(tài)

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",

//日期選擇器出現(xiàn)的位置，可選值為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:{

//日期發(fā)生變化時觸發(fā),已經格式化后的日期，比如

2016-01-01

change:(value)=>{},

//彈出日歷和關閉日歷時觸發(fā)

true

|

false

'open-change':(bool)=>{},

//在

confirm

模式或

clearable

=

true

時有效，在清空日期時觸發(fā)

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":

[],

//時間選擇器出現(xiàn)的位置，可選值為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:{

//時間發(fā)生變化時觸發(fā)

已經格式化后的時間，比如

09:41:00

change:(checked)=>{},

//彈出浮層和關閉浮層時觸發(fā)

true

|

false

'open-change':(bool)=>{},

//在清空日期時觸發(fā)

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",

//設置禁用狀態(tài)

"disabled":false,

//是否設置為只讀

"readonly":false,

//是否可編輯

"editable":true,

//數值精度

"precision":0,

},

event:{

//數值改變時的回調，返回當前值

change:(value)=>{},

//聚焦時觸發(fā)

focus:(event)=>{},

//失焦時觸發(fā)

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:{

//當綁定值變化時觸發(fā)，返回當前值

change:(color)=>{},

//聚焦時觸發(fā)

面板中當前顯示的顏色發(fā)生改變時觸發(fā)

'active-change':(color)=>{},

},

validate:[],

}Cascader多級聯(lián)動CascaderRule:

{

type:"cascader",//必填!

title:"所在區(qū)域",//必填!

field:"address",//必填!

//input值

value:['陜西省','西安市','新城區(qū)'],

props:{

//可選項的數據源，格式參照示例說明

data:vince

||

[],//必填!

//選擇后展示的函數，用于自定義顯示格式

renderFormat:label

=>

label.join('

/

'),

//是否禁用選擇器

disabled:false,

//是否支持清除

clearable:true,

//輸入框占位符

placeholder:'請選擇',

//次級菜單展開方式，可選值為

click

或

hover

trigger:'click',

//當此項為

true

時，點選每級菜單選項值都會發(fā)生變化，具體見上面的示例

changeOnSelect:false,

//輸入框大小，可選值為large和small或者不填

size:undefined,

//動態(tài)獲取數據，數據源需標識

loading

loadData:()=>{},

//是否支持搜索

filterable:false,

//當搜索列表為空時顯示的內容

notFoundText:'無匹配數據',

//是否將彈層放置于

body

內，在

Tabs、帶有

fixed

的

Table

列內使用時，建議添加此屬性，它將不受父級樣式影響，從而達到更好的效果

transfer:false,

},

event:{

//選擇完成后的回調，返回值

value

即已選值

value，selectedData

為已選項的具體數據

change:(value,

selectedData)=>{},

//展開和關閉彈窗時觸發(fā)

'visible-change':bool=>{}

},

validate:[],

}Upload上傳UploadRule

:

{

type:

"Upload",//必填!

field:

"pic",//必填!

title:

"輪播圖",//必填!

//input值,當maxLength等與1時值為字符串,大于1時值為數組

value:

['/uploads/20131030/30-075657_191.jpg','/uploads/20131030/30-075657_191.jpg'],

//input值

props:

{

//上傳控件的類型，可選值為

select（點擊選擇），drag（支持拖拽）

"type":"select",

//必填!

//上傳文件類型，可選值為

image（圖片上傳），file（文件上傳）

"uploadType":"image",

//必填!

//上傳的地址

"action":

"",

//必填!

//上傳的文件字段名

"name":"",

//上傳時附帶的額外參數

"data":{},

//設置上傳的請求頭部

"headers":

{},

//是否支持多選文件

"multiple":

true,

//支持發(fā)送

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

'/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文件類型：/en-US/docs/Web/HTML/Element/input#attr-accept全局配置createOptions{

//插入節(jié)點,默認document.body

el:null,

//form配置

form:{

//是否開啟行內表單模式

inline:false,

//表單域標簽的位置，可選值為

left、right、top

labelPosition:'right',

//表單域標簽的寬度，所有的

FormItem

都會繼承

Form

組件的

label-width

的值

labelWidth:125,

//是否顯示校驗錯誤信息

showMessage: