Vue Element校验validate

忘是亡心i 2022-01-20 01:45 286阅读 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 条评论，286人围观）

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

相关阅读

相关 Vue + Element UI 校验手机号

校验思路监听输入框，过滤字符串长度控制11位通过正则表达式验证手机号格式示例代码 <el-input size="medium"

约定不等于承诺〃/ 2023年10月11日 16:47/ 0 赞/ 52 阅读

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

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

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

相关 vue element form 自定义校验1(表单校验)

通过`ref`属性获得表单对象,调用表单对象的`validate`函数进行表单的整体校验 <template> <!--model绑定整个form对象的的

逃离我推掉我的手/ 2022年10月30日 00:33/ 0 赞/ 34 阅读

相关 vue element form 自定义校验1(字段校验)

<template>   <el-form

梦里梦外;/ 2022年10月30日 00:33/ 0 赞/ 13 阅读

相关 vue element form 默认校验

<template>   <el-form

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

相关 jquery validate 校验

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

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

相关 Validation校验

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

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

相关 Vue Element校验validate

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

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

相关 element-ui+vue-treeselect校验

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

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

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

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

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