資訊專欄INFORMATION COLUMN
摘要：要顯示的錯誤提示則可以即可。寫在最后的以上三點已經(jīng)完全覆蓋了所有表單驗證的情況，可以實現(xiàn)非常復(fù)雜的驗證。正式基于這些原因，我堅信是正確的選擇。
前言
老是遇到一些朋友問一些element-ui組件使用相關(guān)的基礎(chǔ)問題，因為官方文檔上并沒有提供所有瑣碎的功能代碼demo。從這里開始我會根據(jù)我實際遇到的問題記錄一些常見的官方文檔沒有詳述的功能代碼，供給大家拓展思路。
1. 以中國大陸手機號驗證為例
// 這是組價的代碼// 這是rules的代碼 mobile: [ { validator: validateMobile, trigger: "blur" }, { required: true, message: "請輸入手機號", trigger: "blur" }, { pattern: /^1[34578]d{9}$/, message: "目前只支持中國大陸的手機號碼" } ],
在element-ui的源碼中搜索blur，你會很容易看到除了blur 還有focus、input，非常貼心基本滿足了表單驗證的入門需求。
2. 表單局部提交后端驗證
在一些輸入項目較多的表單提交中，比如說注冊時填寫的用戶名，通常我們會對用戶名是否重復(fù)進行驗證，這是就需要調(diào)用服務(wù)來驗證，這種略顯復(fù)雜的驗證，就需要自定義驗證規(guī)則來實現(xiàn)?？聪旅娴拇a：
// 注意validatePass是屬于data的，但不在return中。
data () {
let validatePass = (rule, value, callback) => {
if (value.length >= 8) {
let params = {
"account": value
}
axios.post("localhost:8080/verifyUserAccount", params)
.then(function (response) {
if (response.data.err) {
callback(response.data.msg)
} else {
callback()
}
})
.catch(function () {
callback(new Error("服務(wù)異常"))
})
} else {
callback()
}
}
//這是驗證規(guī)則，當(dāng)然了你也可以同時使用基本的驗證規(guī)則
account: [
{ validator: validatePass , trigger: "blur" }
]
注意：validatePass 自定義規(guī)則中每個執(zhí)行流程中都必須附帶callback()，這樣才能明確通過驗證的情況下去掉輸入框上的loading。要顯示的錯誤提示則可以new Error（“xxxx”）即可。
3. 綜合來看
通?？梢园阉幸?guī)則都寫在自定義的規(guī)則中，即可實現(xiàn)較為復(fù)雜的驗證，實際上我們可以再validatePass里面調(diào)用根實例下所有data methods...，一個很簡單的例子是實現(xiàn)兩次輸入的密碼是否相同的驗證，看下面的代碼：
let validatePass = (rule, value, callback) => {
if (value === "") {
callback(new Error("請再次輸入密碼"))
} else if (value !== this.ruleForm.password) {
callback(new Error("兩次輸入密碼不一致!"))
} else {
callback()
}
}
就這么簡單就可以實現(xiàn)非vuejs情況下是非啰嗦的驗證。而且樣式也不會很丑，當(dāng)然了任然可以選擇自定義樣式。這個以后再記錄。
4. 寫在最后的
以上三點已經(jīng)完全覆蓋了所有表單驗證的情況，可以實現(xiàn)非常復(fù)雜的驗證。正式基于這些原因，我堅信element-ui是正確的選擇。我將會繼續(xù)寫一些剪短的文章補充文檔的遺漏。同時如果你也跟我一樣喜歡element-ui歡迎跟我探討，我們新建了一個qq群478694438![圖片描述][1]，方便大家交流。最后喊一下口號：不拘泥于原理，完全立足于實現(xiàn)！
5. 另
文中涉及到的源碼我將會上傳到討論群中，不足之處持續(xù)更進，共同探討。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88463.html
摘要：先看這個值即為判斷顯示展開還是收縮狀態(tài)的開關(guān)。這樣就實現(xiàn)了展開狀態(tài)下的菜單。如果有時間的話，我會把這個系列寫完，知道朋友們能獨立開發(fā)一個完整的的單頁面后臺管理程序。 涉及到路由，權(quán)限等等相關(guān)內(nèi)容的部分，跟本文主旨關(guān)系不大，所以我將會在另外一篇文章中詳述，混在一起的話內(nèi)容太多了 基于element-ui的左側(cè)可伸縮的菜單通過vuejs來開發(fā)支持展開收縮的菜單是非常簡單的，只需要v-i...
摘要：毫無疑問，設(shè)計模式于己于他人于系統(tǒng)都是多贏的設(shè)計模式使代碼編寫真正工程化設(shè)計模小書前端掘金這是一本關(guān)于的小書。 JavaScript 常見設(shè)計模式解析 - 掘金設(shè)計模式（Design pattern）是一套被反復(fù)使用、多數(shù)人知曉的、經(jīng)過分類編目的、代碼設(shè)計經(jīng)驗的總結(jié)。使用設(shè)計模式是為了可重用代碼、讓代碼更容易被他人理解、保證代碼可靠性。毫無疑問，設(shè)計模式于己于他人于系統(tǒng)都是多贏的；設(shè)計...
摘要：介紹是一個可以通過生成具有動態(tài)渲染數(shù)據(jù)收集驗證和提交功能的表單生成器。并且支持生成任何組件。結(jié)合內(nèi)置種常用表單組件和自定義組件，再復(fù)雜的表單都可以輕松搞定。 介紹 form-create 是一個可以通過 JSON 生成具有動態(tài)渲染、數(shù)據(jù)收集、驗證和提交功能的表單生成器。并且支持生成任何 Vue 組件。結(jié)合內(nèi)置17種常用表單組件和自定義組件，再復(fù)雜的表單都可以輕松搞定。 文檔 | git...
摘要：而則是用到到指令結(jié)合的方式去生成，批量生成元素。表格操作列自定義渲染的時，使用的是的函數(shù)，直接在中插入對應(yīng)模板表格分頁都需要引入分頁組件配合使用兩者總體比較，要比簡潔許多。 element VS iview(最近項目UI框架在選型 ，做了個分析， 不帶有任何利益相關(guān)）主要從以下幾個方面來做對比使用率（npm 平均下載頻率，組件數(shù)量，star, issue…)API風(fēng)格打包優(yōu)化與設(shè)計師友...
閱讀 1236·2021-11-11 16:54
閱讀 1749·2021-10-13 09:40
閱讀 946·2021-10-08 10:05
閱讀 3511·2021-09-22 15:50
閱讀 3714·2021-09-22 15:41
閱讀 1812·2021-09-22 15:08
閱讀 2352·2021-09-07 10:24
閱讀 3582·2019-08-30 12:52
