Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wanglei8381/vue-validator
vue-validator
https://github.com/wanglei8381/vue-validator
regexp vue vue-validator
Last synced: about 2 months ago
JSON representation
vue-validator
- Host: GitHub
- URL: https://github.com/wanglei8381/vue-validator
- Owner: wanglei8381
- Created: 2016-08-19T07:39:33.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-01T11:54:02.000Z (about 7 years ago)
- Last Synced: 2023-12-11T09:51:29.306Z (about 1 year ago)
- Topics: regexp, vue, vue-validator
- Language: HTML
- Size: 354 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-lite-validator
## Install
npm install vue-lite-validator
## Use
import validator from 'vue-lite-validator'
Vue.use(validator, options)
> options:
```
autoHint: 是否自动引入错误提示（在元素后面追加错误dom节点，引入错误样式，比较简单的错误提示），默认false
field: 验证插件默认会在vue组件上添加一个属性，用于保存错误对象信息，默认是errors
messages: 全局错误提示信息，默认空
```
> addValidation: 添加一个通用的规则
添加一个规则,如
```javascript
addValidation('mobile', function (value, ctx) {
return /^1\d{10}$/.test(value);
})
```
> 第一步：编写验证规则model
例子：
```javascript
export default {
title: {
required: true,
minlength: 3,
maxlength: 5,
msg: {required: '必填', minlength: '最少3个字符', maxlength: '最多5个字符'}
},
city: {
type: 'enum',
enum: ['2', '3'],
msg: {enum: '请选择一个'}
},
mobile: {
required: true,
type: ['mobile', 'remote'],
remote: function (val, ctx, cb) {
setTimeout(function () {
cb(false);
}, 1000);
},
msg: {required: '必填', mobile: '手机格式不正确', remote: '手机号不存在'}
},
num: {
required: true,
type: 'number',
range: [1, 10],
check: function (val) {
return val % 2 === 0;
},
msg: { required: '必填', number: '不是数字', range: '1-10之间', check: '不是1-10之间的偶数' }
}
}
```
> 第二步：初始化验证规则
在vue组件中，初始化规则
如：
```
beforeCreate () {
this.$initValidate(model)
}
```
> 第三步：在模版中使用
如：
```html
// 或
>
```
> 第四步：错误处理
如果设置autoHint为true，会自动错误提示，因为样式比较单一，一般不满足需求。
插件在vue组件的data中添加一个errors属性，保存错误信息，可以自己设置错误提示
errors的key的可以这样设置如下：
```
1. 在dom节点上添加key属性，如：
2. 如果不设置，默认会取指令的arg作为key,如：
```
## model验证规则
> key
属性key作为指令的arg，将验证规则绑定在一起
> 规则
1. required: 是否必填，默认false
2. type: 类型，已有的类型：string(默认)，number，regexp，remote，enum
3. check函数, 返回true或false
> doVerify函数 返回值boolean
是否校验该规则
返回值：
true：校验该规则（默认值）
false: 不检验该规则
this指向当前vue实例，第一个参数val,第二个参数ctx
check,remote函数和doVerify的上下文和参数一样
> format函数 返回值处理后的新值
对输入的值预先处理一下，返回处理后的新值
> type: string 默认
1. minlength: 0 最小长度0
2. maxlength: 10 最大长度10
3. length: [3,5] 最小长度3，最大长度5
```
{
required: true,
minlength: 3,
maxlength: 5,
msg: {required: '必填', minlength: '最少3个字符', maxlength: '最多5个字符'}
}
```
> type: number
1. min: 0 最小值0
2. max:10 最大值10
3. range: [3,5] 最小值3，最大值5
```
{
required: true,
type: 'number',
min: 3,
max: 5,
msg: {required: '必填', min: '最小值3', max: '最大值5'}
}
```
> type: regexp 直接写正则表达式就好
```
{
required: true,
type: /^1\d{10}$/,
msg: {regexp: '手机号不正确'}
}
```
> type: remote 异步校验
```
{
required: true,
type: 'remote',
remote: function (val, ctx, cb) {
setTimeout(function () {
cb(false);
}, 1000);
},
msg: {required: '必填', remote: '手机号不存在'}
}
remote函数的this是vm实例
参数val: 当前绑定的值
参数ctx: 一些上下文信息，一般不需要
```
> type: enum 枚举
```
{
type: 'enum',
enum: ['2', '3'],
msg: {enum: '请选择一个'}
}
```
> 其他内嵌的规则
1. type: 'mobile' 手机号(中国大陆)
2. type: 'money' 钱
3. type: 'ip' ip地址
4. type: 'idcard' 身份证(中国大陆)
> type可以是个数组，数组中的规则以此校验
type: ['mobile', 'remote']
> check函数
在一些复杂情况下可以使用check函数校验, 返回值可以字符串错误信息，也可以是true或false，当时false时取msg中的check错误信息
```
{
check (val) {
return val % 2 === 0
},
msg: {check: 'error'}
}
```
## $isValid
插件会将错误信息保存在errors对象中,
可以使用this.$isValid()函数验证所有规则是否通过,返回值是Promise
## $validate
this.$validate(rule,value)
rule: 规则名称
value：验证的值
返回值是Promise