首页 > 其他分享 >validateField的使用

validateField的使用

时间:2023-02-28 14:14:27浏览次数:29  
标签:这里 validateFieldList 校验 valid 数组 使用 validateField

validateField 有些时候我们只需要验证表单中的部分字段,其他字段不需要,这时候我们就需要用validateField函数了,注意,这里有几个坑大家别踩了
首先,我们得知道,使用validateField部分校验数组的时候,数组有几位,就会回调几次。当也就是空的时候,表示验证通过,回调返回为“ ”,所以就是,你校验几个规则,就会返回几个结果,如果通过就为“”(空)。
validateField跟validate的区别: 在这两个代码段中已经展示的很清晰了,自己上手跑一跑逻辑就通了 ​​​​​​​

 let validateFieldList = [];
      this.$refs.loginForm.validateField(
         //这里要放数组,数组中写上要校验的字段
        ["userName", "password", "mobilePhone"],
        async (valid) => {
          if (!valid) {
            //校验通过走这里,每通过一次,会往这个数组里加一个""
            validateFieldList.push(valid);
 
            //因为我这里总共校验了三个字段,所有最终三个字段都校验成功之后,数组中会有三个""
            if (
              validateFieldList.length == 3 &&
              validateFieldList.every((item) => item === "")
            ) {
              //这里写校验通过的业务逻辑
            }
            //校验不通过走这里
            return;
          }
        }

 

标签:这里,validateFieldList,校验,valid,数组,使用,validateField
From: https://www.cnblogs.com/niufang/p/17164023.html

相关文章

  • 标量函数的创建和使用
     --createfunction标量函数名--(--入参入参类型--)--return出参类型--as--Begin--语句处理--end--案例createfunctionGetCodeByName(@Namevarcha......
  • Java应用【九】在 Java 中使用Log4j/Logback进行日志记录和调试
    如果您觉得本博客的内容对您有所帮助或启发,请关注我的博客,以便第一时间获取最新技术文章和教程。同时,也欢迎您在评论区留言,分享想法和建议。谢谢支持!相关阅读:​​Java应用【......
  • 22. Laravel 模型关联:更多使用方法 – 2
    Laravel模型关系:多态关联配套视频地址:https://www.bilibili.com/video/av73028135?p=6多态一对一项目:运营人员就一个图片,发布一篇博客或者一篇文章。表articles......
  • ChatGPT API 简单使用
    关于ChatGPT和API获取我:请你做一个自我介绍ChatGPT:当然可以!您好,我是ChatGPT,是一款由OpenAI训练的大型语言模型。我可以回答各种各样的问题,包括但不限于自然语言......
  • 使用pip导出Python模块
    查看本地模块列表·#查看已安装模块#piplistor#pipfreeze打包本地模块打包单个模块pipdownloadpyarmor-d/root#pipdownload模块名-d路径打包全部......
  • IOS根据经纬度 使用高德直接导航
    #根据地点名称和key获取位置相关信息https://restapi.amap.com/v3/geocode/geo?address=上海&key=0783cc6ccb7b6c856159f87e7be21420#根据经纬度使用高德直接导航io......
  • vue3中style标签内的一些样式使用
    /*vue3中style标签内的一些样式使用1、使用变量作为css的属性值例如:设置元素的字体大小及字体颜色<scriptsetup>constdata=reactive({fontSize:12,color:"......
  • CAD对齐命令怎么用?CAD对齐工具的使用技巧
    CAD对齐工具的特点是操作简单、功能实用,可以快速对齐CAD中的各种实体。那么,你知道CAD对齐命令怎么用吗?不知道也没关系,下面就和小编一起来了解一下浩辰CAD软件中CAD对齐工具......
  • Apache Maven Assembly自定义打包插件的使用
    前言本文主要记录在SpringBoot项目中使用ApacheMavenAssembly插件进行打包的相关内容;官网说明:https://maven.apache.org/plugins/maven-assembly-plugin/概述是什......
  • vue使用纯CSS实现多行文本的“展开”与“收起”功能
    //创建组件<template><!--文档搜索列表展开/收起组件实现了文档搜索列表页文档超过5行会显示展开/收起的功能--><divclass="mj-text-hide"><......