首页 > 其他分享 >给表单项添加必填星号

给表单项添加必填星号

时间:2024-02-29 17:12:04浏览次数:26  
标签:给表 单项 必填 星号 校验 添加

问题

表单校验是否必填,会给表单使用 rules 属性,传入校验规则,如下所示:

        <el-form
          :model="form"
          :rules="rules"
        >
	</el-form>

如果是必填的,则在校验规则中添加 required: true,如下所示。

  data() {
    return {
      rules: {
        pid: [
          {
            required: true,
            message: "请选择上级节点",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },

并且表单项前会有星号提示必填:

image


如果在某些情况下才必填,则校验规则中可传入校验函数,如下所示:

  data() {
    var validateMajor = (rule, value, callback) => {
      if (this.form.type == 4 && !value) {
        callback(new Error(`请选择专业`));
      } else {
        callback();
      }
    };
    return {
      rules: {
        major: [{ validator: validateMajor, trigger: ["blur", "change"] }],
      },
    };
  },

但是上述代码不会给表单项前添加星号

解决

给表单项添加 required 属性,则会添加星号。

image

如下所示,表示只在满足条件时才显示星号:

            <el-form-item
              label="专业"
              prop="major"
              v-show="form.type == 4"
              :required="form.type == 4"
            >
            </el-form-item>

参考链接

element form如何在 label 前面添加必填 红星 ※而不加验证

标签:给表,单项,必填,星号,校验,添加
From: https://www.cnblogs.com/shayloyuki/p/18044767

相关文章

  • Linux终端输入密码显示星号
    LinuxMint系统默认显示星号,这个感觉是非常好的体验,虽然有人觉得不安全,不过无所谓了,好用才是关键这个设置在/etc/sudoers.d/0pwfeedback这里这个文件里面就一行Defaultspwfeedback如果不想显示星号,加个感叹号就行Defaults!pwfeedback参考:https://www.zhihu.com/quest......
  • MySQL给表取别名,怎么才能不直接在sql中写出全部的字段
    资料来源官网教程问题<select>selectt1.id,t1.username,t1.password,t2.id,t2.username,t2.passwordfromsome_table1t1,some_table2t2....</select>如果字段很多一个一个写就很烦。在sql标签中,可以使用${XXX}占位符取别名<sqlid="us......
  • 如何测试表单的必填字段?多角度详解!
    前言大家好,我是chowley,今天来聊一下我最近在工作中遇到的一个实际问题。在Web应用程序中,表单是用户与系统进行交互的重要方式之一。为了确保用户提供的数据完整和有效,测试表单的必填字段成为开发过程中不可或缺的一环。本文将从多个角度详细探讨如何有效地测试表单的必填字段,以保......
  • 上传图片,必填增加校验
    <el-form-itemlabel="产品照片:"class="product-manual-box":prop="`infoTabs[${index}].productfmId`":rules="{required:true,message:'请上传产品照片',trigger:'change'}">......
  • ele 必填项红框后输入内容红框提示还没有消失
      一般检查以下两点即可改正:  1.<el-formQref="gueryFormRef":model="queryParams.attribute":inline="true">而不是v-model      此处用的是el-form的model属性2.e-inputQ中必须绑定v-model属性3.<el-form-item prop="value"&g......
  • java 注解中 必填值
    Java注解中的必填值引言在Java编程中,注解(Annotation)是一种用于向代码中添加元数据的方式。它们提供了一种在代码中添加说明、配置和约束的方法。在使用注解时,有时候需要指定一些必填值,以确保注解的正确使用。本文将介绍Java注解中必填值的概念,并使用代码示例进行说明。什么是必......
  • Oracle中给表赋予权限
    在Oracle数据库中,为表赋予权限的作用是允许或限制其他用户对该表进行特定操作的访问和修改。通过授权表权限,可以确保数据库的安全性和数据的保护。以下是一些常见的表权限以及它们的作用:SELECT:允许用户查询表中的数据。INSERT:允许用户向表中插入新的数据。UPDATE:允许用户修改表......
  • ts 保留或排除,必填或选填
    1.保留或排除interfaceAddFieldTemp{id:string;name:string;//otherfields..createTime:string;updateTime:string;}typeSubsetType=Pick<AddFieldTemp,'name'|'originalName'|'enterpriseId'|//要保留的......
  • python函数传参时加2个星号**作用
    一:问题下面的代码1deftest_func(*args,**kwargs):2print(f"argsType={type(args)},args={args}")3print(f"kwargsType={type(kwargs)},kwargs={kwargs}")45content1=116content2=227info={"name":&......
  • 给ELement 穿梭框加表单必填项验证,提示文字总是存在问题。该页面有重复提交功能
    背景目前项目中form表单提交中有地方用到了穿梭框,穿梭框是必填项,需要rules验证是否选择了数据,一般穿梭框是change触发 问题但是选择change触发,会出现如下问题,也就是用户一选,下面就触发校验规则了,用户体验很差 尝试解决方案将校验触发改成blur,啊哈解决但是又碰到新的问......