Vue Element校验validate

忘是亡心i 2022-01-20 01:45 270阅读 0赞

[官方文档][Link 1]

*  限制输入指定类型

添加type限制即可，type包括以下值：

例子：

rules: {
        bannerType: [ { required: true, message: '请选择类型', trigger: 'change'} ],
        associateId: [ { required: true, message: '请选择公告', trigger: 'change'} ],
        associateData: [ { required: true, type: 'url', message: '输入合法的链接', trigger: 'change' } ]
    }
    复制代码

*  限定输入字符串的长度

用min和max加以限制，element validate具体某个值后的限制规则是个数组，可以添加多个限制。

例子：

rules: {
        rewardReason: [
            { required: true, message: '请输入加分原因', trigger: 'blur' },
            { max: 500, message: '不得超过500字符' }
        ]
    }
    复制代码

*  限定输入的数值介于某两个值之间，即限定最大和最小输入

也是通过min和max限定的，但是发现直接用不行，查了下输入的时候el-input的v-model要加.number限制，即v-model.number。例子：

<el-input v-model.number="form.rewardToLevel" style="display: inline;" placeholder="请输入等级数字" type="number"></el-input>
    
    rules: {
        rewardReason: [
            { required: true, message: '请输入加分原因', trigger: 'blur' },
            { max: 500, message: '不得超过500字符' }
        ]
    }
    复制代码

[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fyiminghe%2Fasync-validator

发表评论取消回复

表情：

评论列表（有 0 条评论，270人围观）

还没有评论，来说两句吧...

相关阅读

相关 Element表单校验validator的使用方法

<el-form ref="form" :model="form" :rules="rules" label-width="110px">

向右看齐/ 2022年12月11日 12:14/ 0 赞/ 370 阅读

相关 Validated参数校验

这里写自定义目录标题标签含义 Validated参数校验全局捕获异常实体类错误信息处理类标签含义

￡神魔★判官ぃ/ 2022年12月11日 04:25/ 0 赞/ 217 阅读

相关 vue element form 默认校验

<template>   <el-form

骑猪看日落/ 2022年10月30日 00:33/ 0 赞/ 154 阅读

相关 jquery validate 校验

在别人的项目中看到的,感觉挺好用，就自己试了一下，确实挺好用。项目结构： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_t

Myth丶恋晨/ 2022年04月13日 13:39/ 0 赞/ 282 阅读

相关 Spring之数据校验-Validation校验

> 前言 SpringMVC提供了强大的数据校验功能，其中有两种方式可以验证输入：一种是利用Spring自带的Validation校验框架；另一种是利用JSR30

超、凢脫俗/ 2022年04月05日 20:56/ 0 赞/ 1006 阅读

相关 Validation校验

1、Bean Validation数据校验检测实体封装类JavaBean中的数据。框架搭建： spring.xml (1)、注解配置处添加validator

超、凢脫俗/ 2022年02月03日 09:09/ 0 赞/ 285 阅读

相关 Vue Element校验validate

[官方文档][Link 1] 限制输入指定类型添加type限制即可，type包括以下值：例子： rules: { bannerType

忘是亡心i/ 2022年01月20日 01:45/ 0 赞/ 271 阅读

相关 element-ui+vue-treeselect校验

element-ui+vue-treeselect下拉框的校验问题陈述：在element-ui中有自带的表单验证，但是使用的vue-treeselect无法验证

Dear 丶/ 2021年12月20日 18:57/ 0 赞/ 775 阅读

相关 Springboot使用校验框架validation校验

1、pom引入 <dependency> <groupId>org.springframework.boot</groupId>

客官°小女子只卖身不卖艺/ 2021年12月12日 16:19/ 0 赞/ 373 阅读

相关 JSR-303校验 @Valid, @Validated

JSR-303校验 @Valid, @Validated 空检查 @Null 验证对象是否为null @NotNull 验证对象是否不为null, 无法

快来打我*/ 2021年11月26日 23:01/ 0 赞/ 343 阅读