wy-validate v0.1.0

轻量级表单验证插件，目前功能还不全可能会有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