首页 > 其他分享 >VUE+ElementUI的表单验证二选一必填项,并且满足条件后清除表单验证提示

VUE+ElementUI的表单验证二选一必填项,并且满足条件后清除表单验证提示

时间:2023-08-10 18:15:28浏览次数:50  
标签:必填 验证 validateName ecode econtainerCode 表单 queryParams

image

上代码

              <el-form-item label="出库单号" prop="ecode" ref="ecode" :rules="rules.ecode">
                <el-input v-model="queryParams.ecode" placeholder="出库单号和出库箱号至少填写一项" clearable style="width: 300px" />
              </el-form-item>
              <el-form-item label="出库箱号" prop="econtainerCode" ref="econtainerCode" :rules="rules.econtainerCode">
                <el-input v-model="queryParams.econtainerCode" placeholder="出库单号和出库箱号至少填写一项" clearable style="width: 300px"  />
              </el-form-item>

  data() {
    var validateName = (rule, value, callback) => {
      if (!this.queryParams.ecode && !this.queryParams.econtainerCode) {
        callback(new Error("请至少填写一项"))
      } else {
        //任意值被填写,清除验证提示
        if (!this.queryParams.ecode || !this.queryParams.econtainerCode) {
          // this.$nextTick(() => {
          //   this.$refs.zhname.clearValidate()
          // })
          this.$refs.ecode.clearValidate()
          this.$refs.econtainerCode.clearValidate()
        }
        callback()
      }
    }

    return {
      rules: {
        ecode: [
          {
            required: true,
            validator: validateName,
            trigger: "change",
          },
        ],
        econtainerCode: [
          {
            required: true,
            validator: validateName,
            trigger: "change",
          },
        ],
      }}

原文来源

标签:必填,验证,validateName,ecode,econtainerCode,表单,queryParams
From: https://www.cnblogs.com/darling331/p/17621134.html

相关文章

  • 使用 SpringBoot 进行优雅的数据验证
    JSR-303规范在程序进行数据处理之前,对数据进行准确性校验是我们必须要考虑的事情。尽早发现数据错误,不仅可以防止错误向核心业务逻辑蔓延,而且这种错误非常明显,容易发现解决。JSR303规范(BeanValidation规范)为JavaBean验证定义了相应的元数据模型和API。在应用程序中,通过使......
  • [学习笔记] JS验证API相关知识
    checkValidity()会检查元素是否有任何输入约束条件,并且检查值是否符合约束条件。 如下所示,Input元素下限为4上限为20:···<inputid="password"type="number"min="4"max="20">···<script>functionmyFunction(){varx=document.getElementById(&quo......
  • element 表单规则所有属性中文(el-from rules)
    RulesRulesmaybefunctionsthatperformvalidation.function(rule,value,callback,source,options)rule:Object{"field":"name",//检查的属性的名"fullField":"name",//"type":"strin......
  • 一键登录和短信验证登录,到底有什么区别?
    一键登录是什么?本机号码一键登录验证是一种登录认证方式,通过获取用户手机上的本机号码来验证用户身份,从而实现快捷登录和简化登录流程的目的。在使用一键登录时,首先需要用户在登录页面选择使用本机号码一键登录,然后系统自动会通过移动网络运营商或SDK获取用户手机上的本机号码。然......
  • JavaScript:表单生成器
    JavaScript:表单生成器一条小橘猫于2021-12-0116:10:56发布3393收藏38分类专栏:JavaScript文章标签:经验分享javajavascripthtml前端版权华为云开发者联盟该内容已被华为云开发者联盟社区收录加入社区JavaScript专栏收录该内容45篇文章55订阅已订阅表单属性有姓......
  • 图形验证码+短信验证码实战
    前言:上一篇分分享了基于阿里云实现的短信验证码文章,考虑到为了防止登录时,非人工操作,频繁获取验证码,趁热打铁,现在添加了图片验证码服务功能。借鉴网上传统的做法,把实现这两个验证的功能做成有个独立的服务,通过Http分别请求获取校验图片验证码和短信验证码。一、需求描述:图......
  • Java入门题-密保验证
    问题:设计一个密保验证,由4位随机字母组成,用户输入验证码验证,一共5次机会重要:随机字母、随机组合、字母分大小写代码:需要引入importjava.util.Random;  importjava.util.Scanner; intVF=0;//用于循环while(VF<5){//规定验证5......
  • go validator验证结构体零值问题
    在使用gin框架验证前端参数时,由于golang特性,对于结构体没赋值的字段会赋予零值(int默认0,string默认""等)所以当想要验证的字段时非必填字段时,不设置required,其他的验证条件依然不能通过解决方法是在非必填字段上添加omitemptypackagemainimport( "github.com/gin-gonic/......
  • 基于机器视觉和倾角传感器的位姿检测系统及验证
    悬臂式掘进机位姿检测是综掘工作面自动化的基础和前提。只有获取稳定可靠的掘进机实时位姿,才能够在此基础上进行综掘工作面自动化、智能化改造工作。为了提高井下综掘工作面的生产效率,西安电子科技大学机电工程学院的研究团队提出一种基于机器视觉和倾角传感器的悬臂式掘进机位姿......
  • JavaWeb短信验证的实现方法
    JavaWeb短信验证的实现方法短信验证是现代应用程序中常用的一种用户身份验证方式。在JavaWeb开发中,我们可以通过一些简单而有效的方法实现短信验证功能。本文将介绍如何使用Java编程语言来实现JavaWeb短信验证。JavaWeb短信验证的实现方法首先,我们需要一个短信服务提供商,比如阿......