前端专栏首页投稿(暂停使用,暂停投稿)让前端飞

vuelidate框架自定义验证规则。

2017-08-31  本文已影响1809人  TOPro

vuelidate是一个非常强大的基于vue的表单验证框架,但是奈何其文档写的很一般,自定义验证规则在文档里只写几句话一笔带过。对作者的惜字如金表示很难理解。下来我来补全一下几个重要的demo。

前提

//确保引入
import { withParams, regex } from "vuelidate/lib/validators/common.js"

1.自定义带参数的验证规则。

//my-validators.js
export var maxMin = function(max,min){
      return withParams({type:maxMin},function(value){
            return !!value && max>value && min<value;
      })
}
import {maxMin} from "path/to/my-validators.js"
//使用
{
    ......
    validations:{
        field:{
            maxMin:maxMin(10,50)
        }
    }
}

2.自定义正则验证规则

//my-validators.js
export var phone = regex('phoneNumber', /^1(3|4|5|7|8)\d{9}$/);
//使用
import {phone} from "path/to/my-validators.js"
{
    ......
    validations:{
        field:{
            phone 
        }
    }
}

3.or的使用

//使用
import {phone,maxMin} from "path/to/my-validators.js"
{
    ......
    validations:{
        field:{
            or:or(phone,maxMin(10,50))
        }
    }
}
上一篇 下一篇

猜你喜欢

热点阅读