餓了麼組件庫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. 另文中涉及到的源碼我將會上傳到討論羣中，不足之處持續更進，共同探討。