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