淺談關(guān)于iview表單驗(yàn)證的問題
關(guān)于iview表單驗(yàn)證的問題
iview表單驗(yàn)證的步驟：
第一步：給 Form 設(shè)置屬性 rules :rules
第二步：同時(shí)給需要驗(yàn)證的每個(gè) FormItem 設(shè)置屬性 prop 指向?qū)?yīng)字段即可 prop=”“
第三步：注意：Form標(biāo)簽里面是 :model
第四步：注意：在Form標(biāo)簽里面必須添加 ref,相當(dāng)于id,在此范圍內(nèi)的表單驗(yàn)證有效
第五步：在操作保存按鈕時(shí)，添加方法，對整個(gè)表單進(jìn)行校驗(yàn)，參數(shù)為檢驗(yàn)完的回調(diào)，會(huì)返回一個(gè) Boolean 表示成功與失敗。
<Form :label-width="100" ref='contractForm' :model='contractForm' :rules="ruleValidate">
<FormItem label='合同編號(hào)：' prop="contractNo">
<Input placeholder="請輸入合同編號(hào)" v-model='contractForm.contractNo'></Input>
</FormItem>
//data里面，寫驗(yàn)證
ruleValidate: {
contractNo:[
{ required: true, message: '合同編號(hào)不能為空', trigger: 'blur' },
],
}
//methods里面，寫方法
addChange(name){
this.$refs[name].validate(valid => {
if (valid) {
}
});
</Form>
iview進(jìn)行表單驗(yàn)證select時(shí)候驗(yàn)證失敗的問題：
用iview自帶的表單驗(yàn)證select標(biāo)簽的時(shí)候，一直驗(yàn)證不通過，因?yàn)閕view默認(rèn)校驗(yàn)數(shù)據(jù)類型為String，而我的select用的value是number類型的
ruleValidate: {
customer:[
{ required: true, message: '客戶名稱不能為空', trigger: 'blur',type:'number'},
],
}
iview進(jìn)行表單驗(yàn)證時(shí)間日期驗(yàn)證失敗的問題：
和下拉框一樣，日期的類型是data
ruleValidate: {
advance:[
{ required: true, message: '預(yù)送達(dá)時(shí)間不能為空', trigger: 'change' ,type: 'date'},
],
}
iview進(jìn)行多重驗(yàn)證的寫法：
多重驗(yàn)證包括第一要驗(yàn)不能為空，第二要驗(yàn)證限制的一些長度，寫正則表達(dá)式等
ruleValidate: {
goodsNum: [
{ required: true, message: '數(shù)量不能為空', trigger: 'blur' },
{ type: 'string',pattern:/^(([1-9]\d{0,3})|0)(\.\d{0,2})?$/, message:'數(shù)量應(yīng)為正浮點(diǎn)數(shù)且不超過9999.99', trigger:'blur'},
],
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue 實(shí)現(xiàn)創(chuàng)建全局組件,并且使用Vue.use() 載入方式
這篇文章主要介紹了Vue 實(shí)現(xiàn)創(chuàng)建全局組件,并且使用Vue.use() 載入方式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue.js過濾器+ajax實(shí)現(xiàn)事件監(jiān)聽及后臺(tái)php數(shù)據(jù)交互實(shí)例
這篇文章主要介紹了vue.js過濾器+ajax實(shí)現(xiàn)事件監(jiān)聽及后臺(tái)php數(shù)據(jù)交互,結(jié)合實(shí)例形式分析了vue.js前臺(tái)過濾器與ajax后臺(tái)數(shù)據(jù)交互相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
Vue $nextTick 為什么能獲取到最新Dom源碼解析
這篇文章主要為大家介紹了Vue $nextTick 為什么能獲取到最新Dom源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
vue中el-select 和el-tree二次封裝實(shí)現(xiàn)
本文介紹了vue中el-select 和el-tree二次封裝實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11
這篇文章主要給大家介紹了關(guān)于關(guān)閉eslint檢查和ts檢查的相關(guān)資料,eslint是一個(gè)JavaScript的校驗(yàn)插件,通常用來校驗(yàn)語法或代碼的書寫風(fēng)格,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
媒體查詢@media常見的不生效原因包括格式書寫錯(cuò)誤,例如and后必須有空格；樣式?jīng)_突,后面的CSS會(huì)覆蓋前面的；CSS本身存在問題,比如塊元素浮動(dòng)導(dǎo)致父級(jí)元素?zé)o高度而背景顏色不顯示；漏掉了meta屬性中的viewport屬性,正確書寫和排列CSS代碼2024-10-10
這篇文章主要介紹了解決vue頁面注入js修改input值問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Node.js+Vue腳手架環(huán)境搭建的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2020-03-03
Vue中正確使用Element-UI組件的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue中正確使用Element-UI組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
VSCode使React?Vue代碼調(diào)試變得更爽
這篇文章主要為大家介紹了VSCode使React?Vue代碼調(diào)試變得更爽的使用方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07