餓了么組件庫(kù)element-ui正則表達(dá)式驗(yàn)證表單，后端驗(yàn)證表單。

0x584a 發(fā)布于2019-08-21 16:22 / 2256人閱讀

摘要：要顯示的錯(cuò)誤提示則可以即可。寫在最后的以上三點(diǎn)已經(jīng)完全覆蓋了所有表單驗(yàn)證的情況，可以實(shí)現(xiàn)非常復(fù)雜的驗(yàn)證。正式基于這些原因，我堅(jiān)信是正確的選擇。

前言

老是遇到一些朋友問一些element-ui組件使用相關(guān)的基礎(chǔ)問題，因?yàn)楣俜轿臋n上并沒有提供所有瑣碎的功能代碼demo。從這里開始我會(huì)根據(jù)我實(shí)際遇到的問題記錄一些常見的官方文檔沒有詳述的功能代碼，供給大家拓展思路。

1. 以中國(guó)大陸手機(jī)號(hào)驗(yàn)證為例

// 這是組價(jià)的代碼

    


// 這是rules的代碼
mobile: [
    { validator: validateMobile, trigger: "blur" },
    { required: true, message: "請(qǐng)輸入手機(jī)號(hào)", trigger: "blur" },
    { pattern: /^1[34578]d{9}$/, message: "目前只支持中國(guó)大陸的手機(jī)號(hào)碼" }
],

在element-ui的源碼中搜索blur，你會(huì)很容易看到除了blur 還有focus、input，非常貼心基本滿足了表單驗(yàn)證的入門需求。

2. 表單局部提交后端驗(yàn)證

在一些輸入項(xiàng)目較多的表單提交中，比如說注冊(cè)時(shí)填寫的用戶名，通常我們會(huì)對(duì)用戶名是否重復(fù)進(jìn)行驗(yàn)證，這是就需要調(diào)用服務(wù)來驗(yàn)證，這種略顯復(fù)雜的驗(yàn)證，就需要自定義驗(yàn)證規(guī)則來實(shí)現(xiàn)。看下面的代碼：

// 注意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()
            }
}

//這是驗(yàn)證規(guī)則，當(dāng)然了你也可以同時(shí)使用基本的驗(yàn)證規(guī)則
account: [
    { validator: validatePass , trigger: "blur" }
]

注意：validatePass 自定義規(guī)則中每個(gè)執(zhí)行流程中都必須附帶callback()，這樣才能明確通過驗(yàn)證的情況下去掉輸入框上的loading。要顯示的錯(cuò)誤提示則可以new Error（“xxxx”）即可。

3. 綜合來看

通常可以把所有規(guī)則都寫在自定義的規(guī)則中，即可實(shí)現(xiàn)較為復(fù)雜的驗(yàn)證，實(shí)際上我們可以再validatePass里面調(diào)用根實(shí)例下所有data methods...，一個(gè)很簡(jiǎn)單的例子是實(shí)現(xiàn)兩次輸入的密碼是否相同的驗(yàn)證，看下面的代碼：

let validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("請(qǐng)?jiān)俅屋斎朊艽a"))
            } else if (value !== this.ruleForm.password) {
                callback(new Error("兩次輸入密碼不一致!"))
            } else {
                callback()
            }
        }

就這么簡(jiǎn)單就可以實(shí)現(xiàn)非vuejs情況下是非啰嗦的驗(yàn)證。而且樣式也不會(huì)很丑，當(dāng)然了任然可以選擇自定義樣式。這個(gè)以后再記錄。

4. 寫在最后的

以上三點(diǎn)已經(jīng)完全覆蓋了所有表單驗(yàn)證的情況，可以實(shí)現(xiàn)非常復(fù)雜的驗(yàn)證。正式基于這些原因，我堅(jiān)信element-ui是正確的選擇。我將會(huì)繼續(xù)寫一些剪短的文章補(bǔ)充文檔的遺漏。同時(shí)如果你也跟我一樣喜歡element-ui歡迎跟我探討，我們新建了一個(gè)qq群478694438![圖片描述][1]，方便大家交流。最后喊一下口號(hào)：不拘泥于原理，完全立足于實(shí)現(xiàn)！

5. 另
文中涉及到的源碼我將會(huì)上傳到討論群中，不足之處持續(xù)更進(jìn)，共同探討。