Element UI Rules

一、Element UI Rules简介

Element UI是一套基于Vue.js2.0的桌面端组件库。当采用Element UI做表单验证的时候，可以使用Element UI Rules。Element UI Rules为表单验证提供了便利。

Element UI Rules使用了async-validator作为底层验证器。相较于普通的Validator，AsyncValidator支持异步验证、定制错误信息等高级特性。Element UI Rules又在AsyncValidator的基础上做了一层封装，让使用者可以更加便利地使用。

二、使用Element UI Rules进行表单验证

使用Element UI Rules进行表单验证可以分为以下几步骤：

1. 引入相关库和样式

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import { Validator } from 'vee-validate'

这里需要注意，Element UI Rules是基于Vee Validate的，所以必须要引入Vee Validate才能正确使用。

2. 新建一个validator

在新建validator的时候，需要调用Vue.use(ElementUI)来启用Element UI。

Vue.use(ElementUI)
const validator = new Validator({
  name: 'required'
})

3. 添加验证规则

这里需要使用elementUI的规则拓展函数。

validator.extend('phone', function (value) {
  return /(^1[3|4|5|7|8]\d{9}$)|(^[0-9]{3,4}\-[0-9]{7,8}$)/.test(value)
})

4. 在组件中使用validator

将validator作为prop传入元素中即可。

<element-input
  v-model="phone"
  placeholder="请输入您的手机号"
  :validator="validator"
  rules="required|phone">
</element-input>

这样，就可以对手机号进行验证了。如果不满足规则，会在输入框下方显示错误提示。

三、Element UI Rules常用规则

1. required

必填验证。

2. email

邮箱格式验证。

3. phone

手机号格式验证。

4. url

url格式验证。

5. min/max length

最小、最大长度验证。

6. pattern

正则表达式验证。

7. custom

自定义验证规则。

四、总结

Element UI Rules为表单验证提供了便利，使用起来简单明了。建议在使用Element UI的时候也使用它提供的表单验证功能。