npm:wy-validate

README

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

按钮触发验证

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

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

特殊情况

对于一些不方便写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

Usage no npm install needed!