摘要:最近在做項(xiàng)目的時(shí)候,關(guān)于表單驗(yàn)證總會(huì)遇見一些奇奇怪怪的問題,下面把表單驗(yàn)證的步驟和表單驗(yàn)證常見的問題梳理下,避免以后開發(fā)中掉坑。進(jìn)行表單驗(yàn)證時(shí)間日期驗(yàn)證失敗的問題我下拉框一樣,日期的類型是類型,所以需要額外設(shè)置類型。
最近在做項(xiàng)目的時(shí)候,關(guān)于表單驗(yàn)證總會(huì)遇見一些奇奇怪怪的問題,下面把表單驗(yàn)證的步驟和表單驗(yàn)證常見的問題梳理下,避免以后開發(fā)中掉坑。
表單驗(yàn)證的步驟第一步:給Form設(shè)置屬性:rules="ruleadd1"。
第二步:給Form設(shè)置屬性:model。
第三步:在Form標(biāo)簽里面必須添加ref,相當(dāng)于id,在此范圍內(nèi)的表單驗(yàn)證有效。
第四步:給需要驗(yàn)證的每個(gè)FormItem設(shè)置屬性prop指向?qū)?yīng)的
第五步:在操作按鈕時(shí),添加方法,對(duì)整個(gè)表單進(jìn)行校驗(yàn),參數(shù)為校驗(yàn)完的回調(diào),會(huì)返回一個(gè)Boolean表示成功與失敗
用iview自帶的表單驗(yàn)證select標(biāo)簽的時(shí)候,一直驗(yàn)證不通過,因?yàn)閕view默認(rèn)校驗(yàn)數(shù)據(jù)類型為String,而我們項(xiàng)目中select用的value有時(shí)候是number類型的,有時(shí)候是String類型的,要根據(jù)具體情況設(shè)置不同的type類型。
iview進(jìn)行表單驗(yàn)證時(shí)間日期驗(yàn)證失敗的問題我下拉框一樣,日期的類型是data類型,所以需要額外設(shè)置type類型。
ruleValidate: { advance:[ { required: true, message: "預(yù)送達(dá)時(shí)間不能為空", trigger: "change" ,type: "date"}, ], }iview進(jìn)行多重驗(yàn)證的寫法
多重驗(yàn)證包括給一個(gè)數(shù)組加多個(gè)驗(yàn)證條件,比如第一要驗(yàn)證不能為空,第二要驗(yàn)證限制一些長(zhǎng)度,寫正則表達(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"}, ], }
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/98043.html
摘要:但是根據(jù)獲取值賦值給表單對(duì)象時(shí),表單驗(yàn)證提示為空問題解決后來我才發(fā)現(xiàn)原因后來問題在表單值的類型上這是提交給接口的值這是接口返回值,一個(gè)是類型的,一個(gè)是類型的,而驗(yàn)證在里不設(shè)置類型是無法識(shí)別的。趕項(xiàng)目比方說我就把返回值都轉(zhuǎn)成類型。 起因 使用iview-ui寫的后臺(tái)管理系統(tǒng)時(shí),碰到提交表單的時(shí)候正常。但是根據(jù)id獲取值賦值給表單對(duì)象時(shí),表單驗(yàn)證提示為空?! 問題解決 后來我才發(fā)現(xiàn)原因:后...
摘要:開發(fā)后臺(tái)系統(tǒng)問題總結(jié)項(xiàng)目參考了用了包裹頁(yè)面進(jìn)行緩存點(diǎn)擊可切換不會(huì)重新渲染在特定頁(yè)面比如詳情頁(yè)需要每次刷新的時(shí)候添加進(jìn)行相關(guān)的刷新導(dǎo)致了另外一個(gè)問題最初跳轉(zhuǎn)時(shí)用的傳參刷新參數(shù)就沒了特改為傳參涉及到關(guān)閉點(diǎn)擊等多個(gè)問題用存儲(chǔ)數(shù)據(jù)并做了最大限 vue+iview 開發(fā)后臺(tái)系統(tǒng)問題總結(jié) 項(xiàng)目參考了iview-admin tags 用了keep-alive 包裹 router-view,頁(yè)面進(jìn)行...
摘要:介紹是一個(gè)可以通過生成具有動(dòng)態(tài)渲染數(shù)據(jù)收集驗(yàn)證和提交功能的表單生成器。并且支持生成任何組件。結(jié)合內(nèi)置種常用表單組件和自定義組件,再?gòu)?fù)雜的表單都可以輕松搞定。 介紹 form-create 是一個(gè)可以通過 JSON 生成具有動(dòng)態(tài)渲染、數(shù)據(jù)收集、驗(yàn)證和提交功能的表單生成器。并且支持生成任何 Vue 組件。結(jié)合內(nèi)置17種常用表單組件和自定義組件,再?gòu)?fù)雜的表單都可以輕松搞定。 文檔 | git...
摘要:它的文檔也是相當(dāng)詳細(xì),每個(gè)功能都配有詳細(xì)說明和實(shí)例代碼,直接復(fù)制就可以使用,我們也計(jì)劃在明年啟動(dòng)英文文檔翻譯計(jì)劃。明年會(huì)啟動(dòng)英文文檔翻譯計(jì)劃,也希望喜歡和支持,同時(shí)英語不錯(cuò)的同學(xué)可以加入我們,一起參與翻譯。 前段時(shí)間在微軟參加活動(dòng),分享了 TalkingData 開源的基于 Vue.js 的高效 UI 組件庫(kù) iView 的一些開發(fā)經(jīng)驗(yàn),現(xiàn)整理成文,和大家探討。 showImg(htt...
摘要:時(shí)隔半年多,終于迎來了它的第一個(gè)正式版本,到目前版本,已經(jīng)有個(gè)常用組件,從功能和設(shè)計(jì)上,是最接近的實(shí)現(xiàn)。主要服務(wù)于中后臺(tái)業(yè)務(wù),目的就是讓網(wǎng)站快速成型上線。 時(shí)隔半年多,iView 終于迎來了它的第一個(gè)正式版本 1.0.0,到目前版本,已經(jīng)有 43 個(gè)常用 UI 組件,從功能和設(shè)計(jì)上,是最接近 Ant.Design 的 Vue.js 實(shí)現(xiàn)。 關(guān)于 iView 1.0 GitHub 地址...
閱讀 3966·2021-11-24 09:38
閱讀 1440·2021-11-19 09:40
閱讀 2785·2021-11-18 10:02
閱讀 3708·2021-11-09 09:46
閱讀 1781·2021-09-22 15:27
閱讀 3121·2019-08-29 15:24
閱讀 1009·2019-08-29 12:40
閱讀 1693·2019-08-28 18:24