el-form 的表单校验,如何验证某一项或者多项;validateField 的使用

news/2024/7/24 13:12:04 标签: vue.js, 前端, javascript, elementui

通常对form表单的校验都是整体校验:

javascript">this.$refs.form.validate( valid => {
    if (valid) {
        // 校验通过,业务逻辑代码...
    }
});

如果需要对表单里的特定一项或几项进行校验,应该如何实现? 

业务场景:下图点探测按钮时,只需要校验前四项,后面的表单项不需要校验

Elementui 官网文档截图:

validateField 这个方法接受两个参数,第一参数为数组或者字符串,第二个参数为回调函数 

javascript">// 点击探测,请求接口
detectionFunc() {
    let hasError = false;
    this.$refs.ruleForm.validateField(['ip', 'port', 'user', 'pwd'], err => {
        if (err) {
            hasError = true;
            return;
        }
    });
    if (!hasError) {
        // 不存在校验不通过的项,请求探测接口...
    }
}

 如果要校验某一项,第一个参数传字符串就可以了。

注意事项:校验多项时,第一个参数传数组,回调函数会触发多次


http://www.niftyadmin.cn/n/5436603.html

相关文章

Hive借助java反射解决User-agent编码乱码问题

一、需求背景 在截取到浏览器user-agent,并想保存入数据库中,经查询发现展示的为编码后的结果。 现需要经过url解码过程,将解码后的结果保存进数据库,那么有几种实现方式。 二、问题解决 1、百度:url在线解码工具 …

Mysql增删改查(详解)

1.新增 insert into 表名 values 新增字段 。 如图: 这里我一共添加了三条数据。 2.查询 2.1 全列查询 select * from 表名 。 如图: 这里的全列查询可以展示一个表中的全部的数据。 2.2 指定查询 select 要查询的字段名 from 表名 。 比如…

nginx同时配置多组tcp反向代理和多组http反向代理

目录 需求背景: 问题分析: 步骤一 如何配置一组tcp反向代理 步骤一 如何配置一组http反向代理 步骤一如何同时配置一组tcp反向代理和一组http反向代理 步骤二、如何同时配置两组tcp反向代理和两组http反向代理 步骤三、如何同时配置多组tcp反向代…

微信小程序选择器picker的使用(省市区)

index.wxml picker中的 moderegion模式&#xff0c;这里同element中的select不同的是&#xff0c;不需要自己在绑定数据原&#xff0c;默认就包含了省市区的整体数据 <view class"section"><view class"section__title">省市区选择器</vie…

大数据开发--01.初步认识了解

一.环境准备 1.使用虚拟机构建至少三台linux服务器 2.使用公有云来部署服务器 二.大数据相关概念 大数据是指处理和分析大规模数据集的一系列技术、工具和方法。这些数据集通常涉及海量的数据&#xff0c;包括结构化数据&#xff08;如关系型数据库中的表格&#xff09;以及…

分享常用的60 个Loading 加载中动效案例源码

这套Loading加载中动效案例源码包含60个不同类型的Loading动画&#xff0c;涵盖了各种风格和效果&#xff0c;可以满足不同用户的需求。动画源码采用HTML、CSS、JavaScript等前端技术开发&#xff0c;代码结构清晰&#xff0c;易于理解和修改&#xff0c;即使是初学者也可以轻松…

苍穹外卖-day10:Spring Task、订单状态定时处理、来单提醒(WebSocket的应用)、客户催单(WebSocket的应用)

苍穹外卖-day10 课程内容 Spring Task订单状态定时处理WebSocket来单提醒客户催单 功能实现&#xff1a;订单状态定时处理、来单提醒和客户催单 订单状态定时处理&#xff1a; 来单提醒&#xff1a; 客户催单&#xff1a; 1. Spring Task 1.1 介绍 Spring Task 是Spring框…

【English Learning】Day16

2024/03/18 和小录打卡的第16天 目录 Words & phrases Words & phrases weakness a sign of weakness 懦弱的表现strengthens and weaknesses 优点和缺点a weakness for 对---迷恋qualify qualify for the Olympics 取得参加奥运会资格gloomy a gloomy room 昏暗的房间…