先看一个场景图:

给一个标签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. Oracle数据库之第二篇

    /* 多表查询 多个数据库表做连接查询 使用场景: 查询的数据来源为多个表 */ --查询员工信息和员工的部门信息 select * from emp; select * from dept; --使 ...

  2. Unitest自动化测试基于HTMLTestRunner报告案例

    报告效果如下: HTMLTestRunner脚本代码如下: #coding=utf-8 # URL: http://tungwaiyip.info/software/HTMLTestRunner.ht ...

  3. Android Gradle 学习笔记(四):Gradle 构建脚本

    本节我们从整体的角度来介绍一下Gradle. 一.setting.gradle 在Gradle中,定义了一个设置文件,用于初始化以及工程树的配置.设置文件的默认的名字就是setting.gradle, ...

  4. 【Gradle】Android Gradle 高级自定义

    Android Gradle 高级自定义 使用共享库 Android的包,如android.app,android.content,android.view,android.widget等,是默认包含 ...

  5. HbaseShell启动

    找到hbase目录 进入bin目录 ./hbase shell 成功

  6. MySQL 优化 (四)

    参数优化 innodb_log_buffer_size 此参数确定些日志文件所用的内存大小,以M为单位.缓冲区更大能提高性能,对于较大的事务,可以增大缓存大小. innodb_log_buffer_s ...

  7. 0day2安全——笔记3

    第二章 函数调用约定 不同的操作系统,语言和编译器调用函数的原理差不多,但是具体的调用约定有差异. C语言VC++编译的函数传参顺序如下图所示(默认使用__stdcall调用约定) 函数调用步骤(__ ...

  8. CF1253E Antenna Coverage(DP)

    本题难点在正确性证明. 令 \(f_i\) 表示 \([1,i]\) 被全部覆盖的最小花费.答案为 \(f_m\). 首先发现,添加一个区间 \([0,0]\) 不会影响答案.所以 \(f_i\) 的 ...

  9. mysql和oracle分页

    mysql分页 关键字limit,limit m,n 其中m表示起始位置的下标,下标从0开始.n表示要显示的条数,比如要查询一个表的第2到5条数据. ,; oracle分页 关键字rownum, ro ...

  10. Java13 闪亮来袭,你是否还停留在 Java8

    近期 Java 界好消息频传.先是 Java 13 发布,接着 Eclipse 也发布了新版本表示支持新版本的 Java 特性. 本文介绍了 Java 13 的新特性并展示了相关的示例. 2019 年 ...