vuelidate框架自定义验证规则。

作者: TOPro | 来源:发表于2017-08-31 20:03 被阅读1809次

    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))
            }
        }
    }
    

    相关文章

      网友评论

        本文标题:vuelidate框架自定义验证规则。

        本文链接:https://www.haomeiwen.com/subject/aedcjxtx.html