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

这篇具有很好参考价值的文章主要介绍了VUE+ElementUI的表单验证二选一必填项,并且满足条件后清除表单验证提示。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

VUE+ElementUI的表单验证二选一必填项,并且满足条件后清除表单验证提示,vue.js,elementui,前端,javascript,ecmascript文章来源地址https://www.toymoban.com/news/detail-647111.html

上代码

<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",
          },
        ],
      }}

原文来源

到了这里,关于VUE+ElementUI的表单验证二选一必填项,并且满足条件后清除表单验证提示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 表单验证 ---- 在Vue2中使用ElementUI进行表单验证

    目录 前言 给表单绑定对应属性 在data中定义数据对象和表单的定义规则 与数据对象双向绑定 对整个表单进行验证 在做项目时,对于表单进行验证是我们必不可少的 例如 搭建一个基本的登录界面 表单嵌套一般都是   el-form el-form-item el-input  进行验证前,我们需要先 对el-

    2024年01月20日
    浏览(41)
  • vue中elementUI表单循环验证

    进行验证的步骤

    2024年02月15日
    浏览(37)
  • vue+elementui表单数组对象深层嵌套之自定义验证规则

    需求场景:在Vue+Elementui项目中,需要在表单的循环数组中,对某一深层嵌套的对象属性制定自定义校验规则。

    2024年02月05日
    浏览(57)
  • vue3在table里使用elementUI的form表单验证

            常规情况下。rules和formItem是一对一的。例如下面的情况,判断表单内的测试1和测试2是否为空。         但是,如果在table中就按照常规的写法如下会发现不管如何输入或删除都将触发valid=false校验。如果在validator_isEmpty中打印value值会发现,value一直未undefined。

    2024年02月04日
    浏览(52)
  • Python和Java二选一该学啥?

    首先我们需要了解Python和 Java分别是什么 根据IEEE Spectrum 2022年编程语言排名前十的分别是:Python,C,C++,C#,Java,SQL,JavaScript,R,HTML,TypeScript。从该数据可以看出Python和Java都是非常流行的编程语言,只不过在不同的应用场景下我们可以选择这两种不同的语言。 Python是一种

    2023年04月18日
    浏览(36)
  • (1)FPGA仿真——二选一数据选择器

    数据选择器是指经过选择,把多个通道的数据传送到唯一的公共数据通道上去,实现数据选择功能的逻辑电路称为数据选择器。在多路数据传送过程中,能够根据需要将其中任意一路选出来的电路,叫做数据选择器,也称多路选择器或多路开关。在选择变量n控制下,从多路数

    2024年02月09日
    浏览(33)
  • (1)FPGA开发实战——二选一数据选择器

    数据选择器是指经过选择,把多个通道的数据传送到唯一的公共数据通道上去,实现数据选择功能的逻辑电路称为数据选择器。在多路数据传送过程中,能够根据需要将其中任意一路选出来的电路,叫做数据选择器,也称多路选择器或多路开关。在选择变量n控制下,从多路数

    2024年02月08日
    浏览(37)
  • elementUI表单验证之动态表单验证

    elementUI 中 Form 组件提供了表单验证的功能,只需要通过  rules  属性传入约定的验证规则,并将 Form-Item 的  prop  属性设置为需校验的字段名即可。 (1)常用表单验证 (2)自定义验证规则(:validator)  有些需要自定义的校验规则可以作为变量写在data中,然后赋值

    2024年02月11日
    浏览(52)
  • 【单周期CPU】LoongArch | LA32R | 二选一控制器MUX | 数据通路

    前言: 本章内容主要是演示在vivado下利用Verilog语言进行单周期简易CPU的设计。一步一步自己实现模型机的设计。本章先介绍单周期简易CPU中数据通路的设计。 💻环境:一台内存4GB以上,装有64位Windows操作系统和Vivado 2017.4以上版本软件的PC机。 💎本章所采用的指令为LoongA

    2024年02月16日
    浏览(47)
  • vue +element UI form表单校验数组嵌套,数组对象必填校验

    使用element表单时会出现数组对象类型的数据结构并且需要必填校验 这时数组对象的检验方法就为paramJsonListRules 注意的是为了实现校验,在需要校验的el-form-item内通过自己的:rules加入对象的校验方法,例如图中想给参数值加校验则直接在相关el-form-item内加入 :rules=\\\"paramJsonLis

    2024年02月11日
    浏览(71)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包