一、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的时候也使用它提供的表单验证功能。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/248113.html
微信扫一扫 
支付宝扫一扫 