程序员经验分享-hwhale

vue el-form-item给多个表单项绑定rules校验规则

2023-11-07

vue el-form-item给多个表单项绑定rules规则

如图所示，我们想要在element的表单里，给多个input添加校验规则。
在这里插入图片描述
只需要在内部添加el-form-item项，并在el-form-item项里绑定prop和rules规则。

注意：最外围el-form-item需要添加属性required

 <el-form-item label="互动积分=" required>
      <el-form-item size="mini" prop="interactive_integral_step" :rules="[{ required: true, message: '输入框不能为空',trigger: 'blur' },{pattern:/^(?:[0-9]\d*|0)(?:\.\d{0,99})?$/, message: '请输入正数'}]">
       <el-input v-model="from.interactive_integral_step" style="width:100px;margin:0 10px;" />
      </el-form-item>
      <el-form-item size="mini" prop="interactive_integral_right" :rules="[{ required: true, message: '输入框不能为空',trigger: 'blur' },{pattern:/^(?:[0-9]\d*|0)(?:\.\d{0,99})?$/, message: '请输入正数'}]">
       <el-input v-model="from.interactive_integral_right" style="width:100px;margin:0 10px;" />
      </el-form-item>
  </el-form-item>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端

vuejs

elementui

javascript

vue el-form-item给多个表单项绑定rules校验规则 的相关文章

随机推荐

  • 手刃一个小爬虫

    from urllib request import urlopen url https www baidu com resp urlopen url with open mybaidu html mode w as f f write r

  • ***.forEach is not a function

    forEach is not a function 缘起 在这里插入图片描述 原生js获取的DOM集合是一个类数组对象 不能直接利用数组的方法 例如 forEach map等 需要进行转换为数组后 才能用数组的方法 1 推荐几种转换成数组的

  • leetcode刷题笔记：两数之和

    题目链接 牺牲空间换时间 使用一个数组记录下遍历的数和target之间的差值 每遍历一个数查找差值列表是否存在该数 class Solution public int twoSum int nums int target int i int

  • Arduino数字滤波设计方法(Python测试滤波示例)和异常值过滤算法

    数字滤波设计 数字信号处理的目的是在数字系统上执行 而不是在模拟电路上进行操作 通过这种方式 它基于软件执行相同的任务 而不需要电子材料或更换 这种方法确保设计简单且可升级 比如用RC元件制作的模拟滤波器 就需要改变材料来改变滤波器的截止频

  • Docker使用阿里云镜像加速器

    登录阿里云控制台 搜索容器镜像服务 界面上没有可以在搜索框中搜索 进入容器镜像服务管理控制台 如果需要开通就按照提示开通一下 如下图所示 在容器镜像服务控制台最底下有个镜像加速器 点进去之后有一个加速器地址 使用这个地址作为docker镜像

  • FreeRTOS ------- 任务（task）

    在学习RTOS的时候 个人觉得带着问题去学习 会了解到更多 1 什么是任务 在FreeRTOS中 每个执行线程都被称为 任务 每个任务都是在自己权限范围内的一个小程序 其具有程序入口每个任务都是在自己权限范围内的一个小程序 其具有程序入口通

  • 中断模式中中断和事件的区别_C中中断和继续之间的区别

    中断模式中中断和事件的区别 In this tutorial you will learn about difference between break and continue in C 在本教程中 您将了解C语言中break和conti

  • 前端websocket连接开发时devserver代理配置及nginx代理配置

    页面代码 socketUrl ws location host websocket ws uid 1 location host即前端服务部署地址 var socket new WebSocket socketUrl 打开事件 socket

  • HTML5+CSS3定位+导航二维码显示隐藏切换案例

  • Qt 样式表介绍

    概述 Qt Widget界面美化除了自己绘制外 有一个更简单高效的方式 就是Qt样式表 Qt样式表是一种强大的机制 通过QApplication setStyleSheet 设置整个应用程序的样式 通过QWidget setStyleShe

  • 分享几个图床网址，便于大家分享图片

    1 ImgURL 图床ImgURL ImgURL免费图床https https www imgurl org 又是一个比较老牌的免费图床服务 稳定性不错 无需注册 游客限制每日上传10张 单张图片不能超过 5M 支持 HTTPS 诞生于20

  • 数组的方法-sort()

    数组的sort 方法主要用于对数组的元素进行排序 其中 sort 方法有一个可选参数 但是 此参数必须是函数 数组在调用sort 方法时 如果没有传参将按字母顺序 字符编码顺序 对数组中的元素进行排序 如果想按照其他标准进行排序 就需要进行

  • Vue路由+NodeJs环境搭建

    Vue路由 NodeJs环境搭建 一 Vue路由 第一步 引入js文件 第二步 创建两个组件展示相关的功能 第三步 形成组件与请求路径的对应关系 第四步 将路由关系和路由对象绑定 第五步 将路由关系和vue实例绑定 第六步 发起请求 第七步

  • 1、docker 镜像操作

    1 创建 拉取镜像 docker hub https hub docker com 搜索对应的镜像 搜索 nvidia cuda 在tags里最终选择 10 2 cudnn7 devel ubuntu18 04版本 最终完整的镜像名 nvi

  • 域名，端口，IP总结

    前言 真正的房子只有几个门 但是一个IP地址的端口可以有65536 即 2 16 个之多 端口是通过端口号来标记的 端口号只有整数 范围是从0 到65535 2 16 1 我们知道 一台拥有IP地址的主机可以提供许多服务 比如Web服务 F

  • 智能交通技术（ITSTech）公号推广简介

    2023年9月14日更新 一 智能交通技术 微信公众号 简介 关注智能交通 车路协同 交通规划 交通改善 智慧城市等领域新理论和技术发展 交流大数据 云边端计算 人工智能 区块链等技术的应用经验 推广智能交通技术在交通规划 交通运输监管 交

  • hj212协议如何和php通讯,HJ212数据传输标准报文解析

    HJ212分为2005年 HJ T212 2005 和2017年 HJ212 2017 的版本 略有不同 网上没找到非常官方的渠道下载 在这贴一份2017年版本的下载地址 TCP IP通讯包组成 名称 类型 长度 描述 包头 字符 2 固定

  • 有符号数和无符号数

    1 数值 针对二进制来讲 有 有符号数 signed 和无符号数 unsigned 因为计算机无法区分一个二进制数是有符号数还是无符号数 因此我们在定义时要明确该数值是有符号数还是无符号数 无符号类型需要通过unsigned关键字指定 否则

  • 下载bison和flex的好地方

    http sourceforge net projects gnuwin32 这里的bison和flex我觉得是最好用的 捣乱的

  • vue el-form-item给多个表单项绑定rules校验规则

    vue el form item给多个表单项绑定rules规则 如图所示 我们想要在element的表单里 给多个input添加校验规则 只需要在内部添加el form item项 并在el form item项里绑定prop和rules规

热门标签