vue2表单验证插件のvee-validate

输入校验对fe来说再熟悉不过了，各种类库插件也蛮多，本文要介绍的是，基于目前很火的国人产框架Vue.js 2.0的表单验证插件 — vee-validate的常用方法，虽然官方API已经有比较详细的介绍，但有些细节还是比较隐藏的，这里分享一下

还是按部就班吧，安装走起：

	
	npm install vee-validate --save
	

使用方法很简单，直接引用

	
	import Vue from 'vue'
	import VeeValidate from 'vee-validate'

	Vue.use(VeeValidate, {
		// 指定locale为中文
	  	locale: 'zh_CN'
	})
	

可以整理一个单独的组件来管理表单验证的相关代码。

	
	import {Validator} from 'vee-validate'
	import cn from 'vee-validate/dist/locale/zh_CN'
	// 默认是en，这里添加中文的lang包
	Validator.addLocale(cn)
	// 自定义校验规则
	Validator.extend('chinese', {
		messages: {
			zh_CN: field => field + '格式不正确'
		},
		validate(value) {
			return /^[\u4E00-\u9FFF\u3400-\u4DFF]+$/.test(value)
		}
	})
	// 修改vee-validate默认的提示文案
	Validator.updateDictionary({
		zh_CN: {
		    messages: {
		        regex: field => field + '格式不正确'
		    }
		}
	});
	

vee-validate本身也有很多常用的校验规则可以选择，这里不累述了，直接参考官方文档。

关于表单控件的引用，这里有几个点：

• data-vv-as - 指定显示给用户看的提示字段名，默认是使用name属性
• v-validate - 校验规则，多个以“|”分隔
• data-vv-validate-on - 指定触发校验的时机，默认是input、change事件时触发，如希望手动触发，设置为none
• name - name属性是必须的，否则无法触发校验

	
	<input type="text" name="name" data-vv-as="姓名" v-validate="'required|chinese'" data-vv-validate-on="blur" v-model="name">
	

然后是错误提示了，errors的常用api如下：

• has(field) - 指定字段是否有错误
• first(field) - 返回指定字段的第一个错误信息
• firstByRule(field, rule) - 返回指定字段某个校验规则的错误信息
• any() - 当前表单校验是否有错误
• add(file, msg, ruleRule) - 添加错误信息到errors对象
• remove(field) - 清空指定字段的所有错误信息
• clear() - 清空当前表单的所有错误信息

p.s: name字段的校验规则包括非空和中文，这里的效果是，非空不提示错误，只有填了非中文的值才提示错误信息，如果空值需要提示，那么用first()

	
	<div class="error" v-show="errors.firstByRule('name','chinese')"></div>
	

以上是通过data-*属性来触发校验，因为前面的Vue.use(VeeValidate)已经在vue中注册了实例，也可以手动触发校验，如表单提交前手动校验：

	
	this.$validator.validateAll().then(async (validateFlag) => {
        	if (!validateFlag) return
			this.$store.dispatch('showToast', {
				type: 'loading',
				message: '正在加载...'
			})
			await this.$store.dispatch('post', data)
      	}, err => {
      	})
	}
	

我这里没有写校验规则，因为在控件上指定了，也可以通过js指定，那么调用就变成了validator.validateAll()

	
	const validator = new Validator({
		name: 'required|chinese',
		...
	})