1.0.3 • Published 5 years ago
vue-light-verify v1.0.3
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>