饿了么组件库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. 另
文中涉及到的源码我将会上传到讨论群中，不足之处持续更进，共同探讨。