这篇文章主要介绍了关于vue中element表单验证的基本要素，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
element主要使用了async-validator这个库作为表单验证
async-validator主要分成三部分
validate
options
rules
其中，对于我们使用element的来说，rules最重要，也是这部分内容较多的。
async-validator各部分async-validator基本使用
import validator from 'async-validator'// 规则的描述const rules = { name: { type: 'string', required: true }}// 根据规则生成验证器const validator = new validator(rules)// 要验证的数据源const source = { name: 'lantuoxie'}// 验证后的回调函数function callback (errors, fileds) { if (errors) { // 验证不通过，errors是一个数组，记录那些不通过的错误信息 // fileds是所有数据源的字段名，也即上面的source的'name' // 验证是根据字段名来的，rules.name 对应 source.name。 字段名要一样才会验证 } // 下面是验证通过的逻辑}// 验证数据源是否符合规则validator.validate(source, callback)
validate
就是上面例子中的validator.validate，是一个函数
function(source, [options], callback)
source和callback对应上面的例子。
options
options有两个值
first: 一个布尔值，如果出现字段不通过，终止验证后面的字段
firstfields: 布尔值或者字符串，如果验证一个字段时，一个规则不通过，终止验证下个规则(一个字段，多个规则的情况)
firstfields是针对单个字段多规则的情况下使用，而first是针对所有字段
rules
最重要的还是rules。定义rule可以有三种形式，但是rules字段名一定要和数据源source的字段名一致。
函数的方式：{ name(rule, value, callback, source, options) {} }
对象的方式： { name: { type: 'string', required: true } }
数组的方式： { name: [{ type: 'string' }, { required: true }] }
上面可以看到，字段名name可以有3种方式定义规则，在使用element的时候还是推荐对象和数组的方式，这个两个比较简单，函数看情况使用。
除了type和required还有哪些用法可以用以及有什么用？
rules的默认规则type: 要被验证的数据的类型如url和number等
required： 是否必填
pattern：使用正则来验证
min: 数据的长度的最小值 (数据类型必须是string或array)
max: 数据的长度的最大值 (数据类型必须是string或array)
len: 数据的长度必须等于这个值 (数据类型必须是string或array)
enum: 数据的值必须等于这个枚举数组某个元素 { enum: [1, 2, 3] }
transform: 一个钩子函数，在开始验证之前可以对数据先处理后验证，如吧number转为string后再验证
message: 报错的提示信息可以是字符串也可以是jsx标签<span>name is required</span>
validator: 自定义验证函数以及报错信息 validator(rule, value, callback)
还有一个deep rules是处理object或者array类型的，使用了fields 或defaultfield
fields：deep rules的时候使用，定义下一层的字段名以及规则
defaultfield: deep rules的时候使用，所有下一层的字段都会采用该规则，可以被fields替换
默认的typestring：必须是string类型，规则不设置type默认是这个
number：必须是number类型，如果后台返回的数据是字符串，可以用transform转为number类型，字符串类型的数字（'12'）不会通过，要注意
boolean: 必须是boolean类型
method: 必须是function
regexp：必须是正则regexp
integer：是number类型的正整数
float: 是number类型的浮点数
array: 是array.isarray通过的数组
object: array.isarray不通过的object类型
enum: 要先定义enum，然后值必须是enum某个值
date: 必须是date对象的实例
url: string类型且符合链接格式
hex
email: string类型，且符合邮箱格式
deep rules使用democosnt urls = ['http://www.baidu.com', 'http://www.baidu.com']// 一个urls的数组，const rules = { urls: { type: 'array', required: true, defaultfield: { type: 'url' } }}
const ids = { name: 'lantuoxie', age: 12, spc: '帅'}const rules = { ids: { type: 'object', required: true, fields: { name: { type: 'string', required: true }, age: { type: 'number', required: true, tranform: number }, spc: { type: 'string', required: true } } }}
自定义验证validatorvalidator(rule, value, callback)
rule: 记录了验证字段的字段名以及规则的信息
value: 要验证的值
callback: 如果callback()代表验证通过，如果callback(new error('错误要提示的信息'))代表验证不通过
// 验证是[min, max]范围内的正整数const betweenint = (min, max) => (rule, v, cb) => { const isbetween = v >= min && v <= max const isint = /^[0-9]+$/.test(v) if (isbetween && isint) return cb() return cb(new error(`要求是在${min}到${max}的正整数 [${min}, ${max}]`))}const rules = { num: { validator: betweenint(1, 5), required: true }}
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
vue项目中如何实现保存头像以及base64字符串转图片的功能
vue中for in对象时如何解决属性为非负整数的问题
以上就是vue中element表单验证的基本要素的详细内容。