vue-light-verify

一个轻量级的 VUE 表单验证插件,并且有可以使用输入限制

Installation

npm install vue-light-verify

#Usage

const import Vue from 'vue'
const import LightVerify from 'vue-light-verify'
Vue.use(LightVerify, options)

// 组件中 
data () {
    vaOptions: {
        errorClass: 'error'
    }
}

rules: {
    username: 'required',
    phone: {
        test: 'required',
        message: '手机号码是必填'
    },
    bankName: [
        'required',
        {
            test: /.{5,12}/g,
            message: '银行姓名格式错误'
        }
    ],
    password: {
        test: function(val) {
            if (val == 123) {
                return false;
            } else {
                return true;
            }
        },
        message: '密码不能为123'
    }
}

Domo&Document

• 指令 v-va
• 输入限制 示例 v-va:Number 只能输入数字，目前只有四个 Number、Chinese、CeAndLe(字母、数字)、Letter
• 使用输入验证时,v-model后必须跟修饰符lazy
• rules中的key名、data中的key、v-va组件传入的字符串，三者名称需保持一致

| 名称 | 类型 | 描述 | | :----: |:----:|:------:| | $lightVerify| Object | 插件挂载的属性 | | $errors | Object | 存放验证失败的字段 | | check | function | 触发验证 | | valid | Boolean | 是否验证通过 |

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <div class="input_box">
      <input type="text" id="test" class="ddd" v-model.lazy="username" v-va:CeAndLe="username"> {{error.username}}
      <input type="text" v-model.lazy="phone" v-va:Number="phone"> {{error.phone}}
      <input type="text" v-model.lazy="bankName" v-va:Chinese="bankName">{{error.bankName[0]}}
      <input type="text" v-model="password" v-va="password">{{error.password}}
      <button @click="showError">提交</button>
    </div>
  </div>
</template>

<script>
export default {
    name: "HelloWorld",
    data() {
        return {
            msg: "Welcome to Your Vue.js App",
            username: '',
            phone: '',
            bankName: '',
            password: '',
            vaOptions: {
                errorClass: 'error'
            }
        };
    },

    computed: {
        error () {
            return this.$lightVerify.$errors;
        }
    },
    
    rules: {
        username: 'required',
        phone: {
            test: 'required',
            message: '手机号码是必填'
        },
        bankName: [
            'required',
            {
                test: /.{5,12}/g,
                message: '银行姓名格式错误'
            }
        ],
        password: {
            test: function(val) {
                if (val == 123) {
                    return false;
                } else {
                    return true;
                }
            },
            message: '密码不能为123'
        }
    },

    methods: {
        showError () {
            this.$lightVerify.check();
        },
    },
};
</script>

<style scoped>

.input_box {
    width: 500px;
    margin: 0 auto;
}

input {
    height: 50px;
    width: 100%;
    margin-bottom: 20px;
    outline: none;
    padding-left: 10px;
    font-size: 20px;
}

.error {
    border: 1px solid red;
}
</style>