Element-ui中自定义表单校验规则
先看一个场景图:

给一个标签el-tag添加表单的校验,且在内容有了以后关闭校验
看代码:
<el-form-item class="baseinfo-tags" label="服务包标签:" prop="tags">
<el-tag
class="tag"
:key="tag"
v-for="tag in baseInfo.tags"
closable
:disable-transitions="false"
@close="handleClose(tag)">
{{tag}}
</el-tag>
<el-input
class="input-new-tag"
v-if="inputVisible"
v-model="inputValue"
ref="saveTagInput"
size="small"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm">
</el-input>
<el-button v-else class="button-new-tag" :disabled="baseInfo.tags.length == 3" size="mini" @click="showInput">+ 新建标签</el-button>
<span class="tag-num">{{baseInfo.tags.length}}/3个</span>
</el-form-item>
为表单添加校验
baseInfoRules: {
tags: [
{
trype: 'array', validator: validateTags, required: true, message: '请选择至少一个标签', trigger: 'change'
}
],
}, // 表单正则
添加自定义正则:

随后需要在标签有了以后将校验关闭:
// 新增标签 确认
handleInputConfirm() {
// xxx的操作
this.$refs.baseInfoForm.validateField('tags'); // 再次校验tag的正则
},
随后在点击提交的时候进行正则判断。在tag改变的时候进行该正则的关闭
Element-ui中自定义表单校验规则的更多相关文章
- Django 表单校验 表单字段设置 自定义表单校验规则
今天看到了一篇非常好的博文,拿来和大家分享一下. 内容包括了: 用户注册时输入数据的校验 使用widget进行字段设置 实现自定义的校验规则 参考自下面的这篇文章
- Element ui 中的表单提交按钮多次点击bug修复
- Vue Element-ui表单校验规则,你掌握了哪些?
1.前言 Element-ui表单校验规则,使得错误提示可以直接在form-item下面显示,无需弹出框,因此还是很好用的. 我在做了登录页面的表单校验后,一度以为我已经很了解表单的校验规则. ...
- jquery.validate.js使用之自定义表单验证规则
jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 ...
- DEDE中自定义表单HTML 怎么写
用DEDE嵌套网站时,有时我们需要添加自定义字段,而自定义字段的HTML样式如何设置呢? 功能地图(核心/频道模型/内容模型管理/)——普通文章的修改——字段管理——你的自定义字段的修改——最下面自定 ...
- 测试开发【提测平台】分享10-Element UI抽屉和表单校验&增改接口合并实现应用管理
微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 开篇说个小讨论,一个群里聊天聊到关于更新篇章的长度,是小篇幅多次,还是每次按照一个小完整的功能,我个人的是按照后种来的,主要的思考就是希望 ...
- vue2.0+Element UI 实现动态表单(点击按钮增删一排输入框)
对于动态增减表单项,Element UI 官方文档表单那一节已经介绍得很清楚了,我之前没有看见,绕了很多弯路,这里针对点击按钮增删一排输入框的问题做一个总结. 效果图如下 存在一排必填的姓名与手机号, ...
- Yii2中自定义表单样式
use yii\widgets\ActiveForm; <?php $form = ActiveForm::begin([ 'options' => ['class' => 'for ...
- vue + element 实现登录注册(自定义表单验证规则)
注册页包含手机验证码登录和密码的二次验证. 效果如下: 实现代码: <template> <div> <div class="register-wrapper& ...
随机推荐
- Java中的“浅复制”与“深复制”
复制 将一个对象的引用复制给另一个对象,一共有三种方式.第一种方式是直接赋值,第二种方式是浅复制,第三种方式是深复制. 1.直接赋值 在Java中,A a1 = a2,这实际上复制的是引用,也就是说 ...
- SpringCloud(四):使用Feign实现声明式服务调用
一.Feign介绍Feign是一个声明式的伪Http客户端,它使得写Http客户端变得更简单.使用Feign,只需要创建一个接口并注解.它具有可插拔的注解特性,可使用Feign 注解和JAX-RS注解 ...
- JQuery iframe宽高度自适应浏览器窗口大小的解决方法
iframe宽高度自适应浏览器窗口大小的解决方法 by:授客 QQ:1033553122 1. 测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com ...
- 关于angularjs异步操作后台请求时,用$q.all排列先后顺序的问题
最近我在做angularjs程序时遇到了一个问题 1.页面有很多选择框,一个选择框里面有众多的选择项,和一个默认选定的项,像下面这样(很多选择框,不只一个): 2.众多的选项要从后台接口得到,默认项从 ...
- ENDIAN的由来及BIG-EDIAN 和LITTLE-ENDIAN(转)
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/kingmax54212008/arti ...
- Swift零基础教程2019最新版(一)搭建开发环境
Swift简单介绍 Swift是苹果强力推荐的新型开发语言,能开发苹果下属所有软件平台(iOS,iPadOS,macOS,watchOS,tvOS)初学者如果想进入苹果的开发体系,从Swift开始学习 ...
- Transportable tablespace on standby (Doc ID 788176.1)
APPLIES TO: Oracle Database - Enterprise Edition - Version 10.2.0.1 to 10.2.0.4 [Release 10.2]Oracle ...
- 异常类的构建——顶层父类Exception的实现
异常类构建异常的类型可以是自定义类类型对于类类型异常的匹配依旧是从上到下严格的匹配赋值兼容性原则在异常匹配中依然适用一般而言-匹配子类异常的catch放在上部-匹配父类异常的catch放在下部 现代C ...
- 6.jenkins构建任务3-java项目
java项目 部署java的maven项目 1.检查插件,新版的jenkins默认就会安装 maven的插件 没有的话手动安装一下. Maven Integration plugin 2.安装环境 ...
- 求n的阶乘!
编写一个computer类,类中含有一个求n的阶乘的方法,将该类打包, 在另一个包中引入包,在主类中定义computer类的对象,调用求n的阶乘的方法,并输出结果 结果