先看一个场景图:

给一个标签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中自定义表单校验规则的更多相关文章

  1. Django 表单校验 表单字段设置 自定义表单校验规则

    今天看到了一篇非常好的博文,拿来和大家分享一下. 内容包括了: 用户注册时输入数据的校验 使用widget进行字段设置 实现自定义的校验规则 参考自下面的这篇文章

  2. Element ui 中的表单提交按钮多次点击bug修复

  3. Vue Element-ui表单校验规则,你掌握了哪些?

    1.前言   Element-ui表单校验规则,使得错误提示可以直接在form-item下面显示,无需弹出框,因此还是很好用的.   我在做了登录页面的表单校验后,一度以为我已经很了解表单的校验规则. ...

  4. jquery.validate.js使用之自定义表单验证规则

    jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 ...

  5. DEDE中自定义表单HTML 怎么写

    用DEDE嵌套网站时,有时我们需要添加自定义字段,而自定义字段的HTML样式如何设置呢? 功能地图(核心/频道模型/内容模型管理/)——普通文章的修改——字段管理——你的自定义字段的修改——最下面自定 ...

  6. 测试开发【提测平台】分享10-Element UI抽屉和表单校验&增改接口合并实现应用管理

    微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 开篇说个小讨论,一个群里聊天聊到关于更新篇章的长度,是小篇幅多次,还是每次按照一个小完整的功能,我个人的是按照后种来的,主要的思考就是希望 ...

  7. vue2.0+Element UI 实现动态表单(点击按钮增删一排输入框)

    对于动态增减表单项,Element UI 官方文档表单那一节已经介绍得很清楚了,我之前没有看见,绕了很多弯路,这里针对点击按钮增删一排输入框的问题做一个总结. 效果图如下 存在一排必填的姓名与手机号, ...

  8. Yii2中自定义表单样式

    use yii\widgets\ActiveForm; <?php $form = ActiveForm::begin([ 'options' => ['class' => 'for ...

  9. vue + element 实现登录注册(自定义表单验证规则)

    注册页包含手机验证码登录和密码的二次验证. 效果如下: 实现代码: <template> <div> <div class="register-wrapper& ...

随机推荐

  1. PHP简单判断当前使用的是什么浏览器

    PHP简单判断当前使用的是什么浏览器,判断浏览器类型的方法,方便统计网站访问用户使用浏览器的比例. 判断浏览器类型方法 function userBrowser() { $user_OSagent = ...

  2. 使用elementUI的日期选择框,两选择框关联时间限值

    elementui 本身也提供了在一个输入框内关联选择时间的组件,非常好使,但无奈项目需要用两个输入框去关联的选择: <el-date-picker class="datepicker ...

  3. 剑指offer 26:复杂链表的复制

    题目描述 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引用,否 ...

  4. mssql sqlserver 将逗号分隔的一列数据转换为多列数据的方法分享

    转自:http://www.maomao365.com/?p=10278  摘要: 下文讲述sqlserver中将使用逗号组合的单列数据,分隔为多列数据的方法 实验环境:sql server 2012 ...

  5. YUM命令总结

    1.关于YUM源 Yum 全称为 Yellow dog Updater Modified,它是一个在线的软件安装命令. 能够从指定的服务器自动下载RPM包并且安装,可以自动处理依赖性关系,并且一次安装 ...

  6. CodeForces - 1230E(dfs+数论+树上贡献)

    题意 https://vjudge.net/problem/CodeForces-1230E 给出一棵树, 点上有权值, 对于每个点, 求它和所有后代节点的GCD的和. 思路 对于一个点,他对后代的贡 ...

  7. June 30th, 2019. Week 26th, Sunday

    It's so easy to be careless, it takes courage and courage to care. 不在乎很容易,但在乎却需要很多勇气. Sometimes it w ...

  8. RabbitMQ入门及其几种工作模式

    1.简介 MQ全程Message Queue,用于应用程序和应用程序间进行通信.RabbitMQ采用Erlang编写,实现了AMQP(高级消息队列)协议,跨平台,支持各种主流的操作系统和多种客户端. ...

  9. qt用于图片显示的窗口

     用于图片显示的窗口 国产化  

  10. 设计模式-Proxy(结构型模式)

    以下代码来源: 设计模式精解-GoF 23种设计模式解析附C++实现源码 //Proxy.h #pragma once class Subject { public: virtual ~Subject ...