餓了么組件庫element-ui正則表達式驗證表單，后端驗證表單。

前言

老是遇到一些朋友問一些element-ui組件使用相關的基礎問題，因為官方文檔上並沒有提供所有瑣碎的功能代碼demo。從這里開始我會根據我實際遇到的問題記錄一些常見的官方文檔沒有詳述的功能代碼，供給大家拓展思路。

1. 以中國大陸手機號驗證為例

// 這是組價的代碼
<el-form-item prop="mobile">
    <el-input type="text" v-model="ruleForm.mobile" auto-complete="off" placeholder="請輸入手機號"></el-input>
</el-form-item>

// 這是rules的代碼
mobile: [
    { validator: validateMobile, trigger: 'blur' },
    { required: true, message: '請輸入手機號', trigger: 'blur' },
    { pattern: /^1[34578]\d{9}$/, message: '目前只支持中國大陸的手機號碼' }
],

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

2. 表單局部提交后端驗證

在一些輸入項目較多的表單提交中，比如說注冊時填寫的用戶名，通常我們會對用戶名是否重復進行驗證，這是就需要調用服務來驗證，這種略顯復雜的驗證，就需要自定義驗證規則來實現。看下面的代碼：

// 注意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('服務異常'))
                })
            } else {
                callback()
            }
}

//這是驗證規則，當然了你也可以同時使用基本的驗證規則
account: [
    { validator: validatePass , trigger: 'blur' }
]

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

3. 綜合來看

通常可以把所有規則都寫在自定義的規則中，即可實現較為復雜的驗證，實際上我們可以再validatePass里面調用根實例下所有data methods...，一個很簡單的例子是實現兩次輸入的密碼是否相同的驗證，看下面的代碼：

let validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('請再次輸入密碼'))
            } else if (value !== this.ruleForm.password) {
                callback(new Error('兩次輸入密碼不一致!'))
            } else {
                callback()
            }
        }

就這么簡單就可以實現非vuejs情況下是非啰嗦的驗證。而且樣式也不會很丑，當然了任然可以選擇自定義樣式。這個以后再記錄。

4. 寫在最后的

以上三點已經完全覆蓋了所有表單驗證的情況，可以實現非常復雜的驗證。正式基於這些原因，我堅信element-ui是正確的選擇。我將會繼續寫一些剪短的文章補充文檔的遺漏。同時如果你也跟我一樣喜歡element-ui歡迎跟我探討，我們新建了一個qq群478694438![圖片描述][1]，方便大家交流。最后喊一下口號：不拘泥於原理，完全立足於實現！

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