自己写了一个Vue表单验证插件

import WyValidate from 'wy-validate';

Vue.use(WyValidate);

<div>
  <input type="text" class="v-validate" v-validate="rules1" data-error="" v-model="data"/>
</div>

.is-error-span{
  color: #f56c6c!important;
  font-size: 14px!important;
  line-height: initial!important;
  padding-top: 3px!important;
  position: absolute!important;
  top: 100%!important;
  left: 0!important;
}

<button v-submit="'testSubmit'">确认</button>

let elements = document.getElementsByClassName('v-validate');
let evObj = document.createEvent('Event');
evObj.initEvent('input', true, true);
for (let element of elements) {
    element.dispatchEvent(evObj);
}
let errorInputs = document.getElementsByClassName('is-error-span');
if(errorInputs.length === 0){
    // 这里写验证成功后的代码
}

export default {
	name: 'app',
	data() {
		return {
			// 是否为空
			rules1: {
				type: 0,
				required: true,
				message1: "不能为空"
			},
			// 两个数之间
			rules2: {
				type: 1,
				// required可选值为true/false
				required: true,
				// message1为required: true时候的提示
				message1: "不能为空",
				// message1为数字不在范围时候的提示
				message2: "请输入2位数",
				min: 10,
				max: 99
			},
			// 数据类型
			rules3: {
				type: 3,
				required: true,
				message1: "不能为空",
				// textType可选值为 number email url chinese cellphonenumber(手机) phonenumber(固话)
				textType: 'number',
				message2: "请输入数字"
			},
			// 自定义正则
			rules4: {
				type: 4,
				required: true,
				message1: "不能为空",
				regex: '',
				message2: "请输入2位数"
			}
		}
	}
}

Vue.use(WyValidate,{directiveName: "这里写自定义的指令名称"});