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框架自定义验证规则。

    vuelidate是一个非常强大的基于vue的表单验证框架,但是奈何其文档写的很一般,自定义验证规则在文档里只写几...

  • laravel中遇到的问题

    1、关于自定义验证规则 在自定义验证规则中,如果自定义验证规则的名称使用了驼峰结构,例:'oldpassword'...

  • Vuelidate

    Vuelidate Vuelidate是一款简单轻量级的基于模块的Vue.js验证插件。 安装 安装很简单,用np...

  • layui自定义验证

    自带验证 lay-verify 自定义验证规则

  • Jquery validation

    前端表单验证框架 页面引入 默认校验规则 封装后检验器 自定义rules举例(校验用户长度等) Example

  • thinkphp5.1

    一、验证器 官方文档:验证器官方文档:验证场景 验证器定义 数据验证 批量验证 抛出验证异常 自定义验证规则

  • 【Vue】 使用 vuelidate 实现表单验证

    vue中,使用vuelidate方便地实现表单验证。 [官方文档链接]https://monterail.gith...

  • laravel之验证

    控制器验证 $this->validate(验证参数,[验证规则],自定义错误消息提示); 首次验证失败后中止后续...

  • vuelidate的表单验证插件的使用

    在vue中,我们使用vuelidate实现表单验证,达到限制用户输入的目的,以及提交时验证表单的目的。查看官方文档...

  • Laravel Validator自定义参数验证规则

    自定义参数验证规则 public Validator make(array $data, array $rules...

网友评论

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

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