淺談關(guān)于iview表單驗證的問題
更新時間：2018年09月29日 14:50:02 作者：Amanda_wmy
這篇文章主要介紹了淺談關(guān)于iview表單驗證的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
關(guān)于iview表單驗證的問題
iview表單驗證的步驟：
第一步：給 Form 設(shè)置屬性 rules :rules
第二步：同時給需要驗證的每個 FormItem 設(shè)置屬性 prop 指向?qū)?yīng)字段即可 prop=”“
第三步：注意：Form標簽里面是 :model
第四步：注意：在Form標簽里面必須添加 ref,相當于id,在此范圍內(nèi)的表單驗證有效
第五步：在操作保存按鈕時，添加方法，對整個表單進行校驗，參數(shù)為檢驗完的回調(diào)，會返回一個 Boolean 表示成功與失敗。
<Form :label-width="100" ref='contractForm' :model='contractForm' :rules="ruleValidate">
<FormItem label='合同編號：' prop="contractNo">
<Input placeholder="請輸入合同編號" v-model='contractForm.contractNo'></Input>
</FormItem>
//data里面，寫驗證
ruleValidate: {
contractNo:[
{ required: true, message: '合同編號不能為空', trigger: 'blur' },
],
}
//methods里面，寫方法
addChange(name){
this.$refs[name].validate(valid => {
if (valid) {
}
});
</Form>
iview進行表單驗證select時候驗證失敗的問題：
用iview自帶的表單驗證select標簽的時候，一直驗證不通過，因為iview默認校驗數(shù)據(jù)類型為String，而我的select用的value是number類型的
ruleValidate: {
customer:[
{ required: true, message: '客戶名稱不能為空', trigger: 'blur',type:'number'},
],
}
iview進行表單驗證時間日期驗證失敗的問題：
和下拉框一樣，日期的類型是data
ruleValidate: {
advance:[
{ required: true, message: '預(yù)送達時間不能為空', trigger: 'change' ,type: 'date'},
],
}
iview進行多重驗證的寫法：
多重驗證包括第一要驗不能為空，第二要驗證限制的一些長度，寫正則表達式等
ruleValidate: {
goodsNum: [
{ required: true, message: '數(shù)量不能為空', trigger: 'blur' },
{ type: 'string',pattern:/^(([1-9]\d{0,3})|0)(\.\d{0,2})?$/, message:'數(shù)量應(yīng)為正浮點數(shù)且不超過9999.99', trigger:'blur'},
],
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue.js的雙向數(shù)據(jù)綁定Object.defineProperty方法的神奇之處
今天小編就為大家分享一篇關(guān)于vue.js的雙向數(shù)據(jù)綁定Object.defineProperty方法的神奇之處，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要介紹了vue實現(xiàn)彈幕功能,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-10-10
vue elementui select標簽監(jiān)聽change事件失效問題
這篇文章主要介紹了vue elementui select標簽監(jiān)聽change事件失效問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
vue3.0報錯Cannot?find?module‘worker_threads‘的解決辦法
這篇文章介紹了vue3.0報錯Cannot?find?module‘worker_threads‘的解決辦法。對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
這篇文章主要為大家詳細介紹了vue輸入框組件開發(fā)過程，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細介紹了Vue.js組件tabs實現(xiàn)選項卡切換效果的相關(guān)資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
在Vue.js中,頁面跳轉(zhuǎn)是構(gòu)建單頁面應(yīng)用（SPA）的基本操作之一,本文將介紹Vue中實現(xiàn)頁面跳轉(zhuǎn)的幾種方法,并通過實例代碼幫助理解每種方法的用法,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了在Vuex中Mutations修改狀態(tài)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue金額格式化保留兩位小數(shù)的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue項目引入PWA的步驟，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-04-04