elementui清除表单个别表单项验证

2024-01-22 22:20

本文主要是介绍elementui清除表单个别表单项验证,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

elementui清除表单个别表单项验证

  • 1.使用场景
  • 2.实现

1.使用场景

当我们对表单项进行操作的时候,可能会有联动的两个或则多个表单项,很容易出现下列的情况:
在这里插入图片描述
很明显,当我们在选择方式改变的时候就应该清除后面输入框的验证错误提示而不影响到其他的表单项。

2.实现

<!--  -->
<template><div class='app-container'><el-form :rules="rules" ref="form" :model="form" style="display:flex"><el-form-item prop="aaa" style="width:300px;margin-right: 10px;" label="选择方式"><el-select v-model="form.aaa" @change="clear"><el-option v-for="(item,index) in demoArr" :key="index" :label="item.label" :value="item.value"></el-option></el-select>    </el-form-item><el-form-item prop="bbb" style="width:300px;margin-right: 10px;"><el-input v-model="form.bbb"></el-input></el-form-item><span>{{form.aaa == 1 ? '人': '%'}} </span></el-form>   </div>
</template>
<script>
export default {data () {return {demoArr:[{label:'按数量',value:1},{label:'按比例',value:2}],form:{aaa:'',bbb:''},rules:{bbb:[{required: true, message:'请输入', trigger: 'blur'}]}};},methods: {clear(){this.$refs.form.clearValidate(['bbb'])}}
}
</script>

结果:
在这里插入图片描述
当然要清除多个的话,clearValidate([])数组,逗号隔离就行

这篇关于elementui清除表单个别表单项验证的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/634411

相关文章

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要

C#提取PDF表单数据的实现流程

《C#提取PDF表单数据的实现流程》PDF表单是一种常见的数据收集工具,广泛应用于调查问卷、业务合同等场景,凭借出色的跨平台兼容性和标准化特点,PDF表单在各行各业中得到了广泛应用,本文将探讨如何使用... 目录引言使用工具C# 提取多个PDF表单域的数据C# 提取特定PDF表单域的数据引言PDF表单是一

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

C++ | Leetcode C++题解之第393题UTF-8编码验证

题目: 题解: class Solution {public:static const int MASK1 = 1 << 7;static const int MASK2 = (1 << 7) + (1 << 6);bool isValid(int num) {return (num & MASK2) == MASK1;}int getBytes(int num) {if ((num &

HTML提交表单给python

python 代码 from flask import Flask, request, render_template, redirect, url_forapp = Flask(__name__)@app.route('/')def form():# 渲染表单页面return render_template('./index.html')@app.route('/submit_form',

C语言 | Leetcode C语言题解之第393题UTF-8编码验证

题目: 题解: static const int MASK1 = 1 << 7;static const int MASK2 = (1 << 7) + (1 << 6);bool isValid(int num) {return (num & MASK2) == MASK1;}int getBytes(int num) {if ((num & MASK1) == 0) {return

easyui同时验证账户格式和ajax是否存在

accountName: {validator: function (value, param) {if (!/^[a-zA-Z][a-zA-Z0-9_]{3,15}$/i.test(value)) {$.fn.validatebox.defaults.rules.accountName.message = '账户名称不合法(字母开头,允许4-16字节,允许字母数字下划线)';return fal

easyui 验证下拉菜单select

validatebox.js中添加以下方法: selectRequired: {validator: function (value) {if (value == "" || value.indexOf('请选择') >= 0 || value.indexOf('全部') >= 0) {return false;}else {return true;}},message: '该下拉框为必选项'}

form表单提交编码的问题

浏览器在form提交后,会生成一个HTTP的头部信息"content-type",标准规定其形式为Content-type: application/x-www-form-urlencoded; charset=UTF-8        那么我们如果需要修改编码,不使用默认的,那么可以如下这样操作修改编码,来满足需求: hmtl代码:   <meta http-equiv="Conte

js异步提交form表单的解决方案

1.定义异步提交表单的方法 (通用方法) /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span style="color:#ff0000;"><strong>@注意 后台接收参数要解码否则中文会导致乱码 如:URLDecoder.decode(param,"UTF-8")</strong></span>