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

轻量级表单验证插件，目前功能还不全可能会有BUG

入门

以Vue2.x为例

引入

在main.js中引入并use

import WyValidate from 'wy-validate';

Vue.use(WyValidate);

页面使用

普通验证

添加v-validate自定义指令和v-validatecss类名，data-error目前可有可无

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

添加错误提示样式,类名为is-error-span，是写死在插件里的。这里给出一个简单的样式

.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;
}

按钮触发验证

1. 在button上加入v-submit="'testSubmit'",testSubmit为验证成功后的函数名。必须加单引号，不然会被认为是变量。

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

2. 特殊情况

对于一些不方便写v-submit的时候可以参考以下

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){
    // 这里写验证成功后的代码
}

定义规则

规则分为4类。是否为空、数字范围、类型、自定义正则

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位数"
			}
		}
	}
}

规则说明

无

自定义指令名称

默认指令名称为wyValidate，自定义则需要这样写，注意和其他指令命名冲突。

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

注意事项

• input的父级标签要添加position: relative

• 注意自定义指令和其他插件冲突

• 注意错误提示的css可能会被自身的css冲突

• 错误提示的css类名为is-error-span可以自定义

• 不支持checkbox