普通的正则校验就不具体写了。

项目中遇到一个el-form-item含有多个input或者select,如何绑定值?

// 一个form-item中有多个必填项
<el-form-item label="通知限制" class="content-flex" required>
<el-form-item prop="notice_limit"><el-input v-model="form.notice_limit" style="width: 100px" /></el-form-item>
<el-form-item prop="notice_type">
<el-select v-model="form.notice_type" placeholder="请选择" style="width: 100px">
<el-option v-for="item in timeType" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>

// 普通的必填项
<el-form-item
label-width="140px"
label="通知次数不可超过"
prop="notice_time"
style="margin-left:24px;"

>
<el-input v-model="form.notice_time" style="width: 100px" />
</el-form-item>

<script>
       rules: {
        notice_limit: { required: true, message: '请输入时长', trigger: 'blur' },
        notice_type: { required: true, message: '请选择时间单位', trigger: 'change' },
        notice_time: { required: true, message: '请输入限制次数', trigger: 'blur' }
      }

</script>

vue中form表单校验,一个form-item中有多个必填项如何操作?的更多相关文章

  1. 应用二:Vue之ElementUI Form表单校验

    (注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的)   表单校验是前端开发过程中最常用到的功能之一,根据个人的工作经验总结在此对表单校验功能的基 ...

  2. vue+iview的form表单校验总结

    这篇文章时关于如何使用iview的form表单校验.主要学习如何使用form校验(以校验文字长度为例),以及如何动态添加校验规则和异步校验. 1.为需要校验的表单添加form标签 <!--注意: ...

  3. React-Antd4的Form表单校验

    之前很少用react做项目,最近入职新公司,用的react,在自己的摸索过程中,慢慢会记录一些使用方法.今天简单记录一下使用antd 4.0版本的Form表单校验,直接代码. 需要购买阿里云产品和服务 ...

  4. form表单中只有一个input时,按回车键后表单自动提交(form表单的一个小坑)

    form中只有一个input按回车键表单会自动提交 在一个form表单中,若只有一个input,按回车键表单会自动提交,但是当表单中存在多个input时,按回车键不会执行任何操作,这是form表单的一 ...

  5. iview form表单数值类型校验「iview自定义form表单校验器」

    摘录iview表单验证 Form 组件基于 sync-validator 实现的数据验证,给 Form 设置属性 rules,同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可. ...

  6. jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址

     一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...

  7. vue自定义轻量级form表单校验

    遇到了form表单提交的需求,找了vue的组件觉得不够灵活,有时间自己写了一个. 调用方法 全局引入注册: import va from 'global/js/va' va.install(Vue); ...

  8. form表单的一个页面多个上传按钮实例

    /* * 图片上传 */ @RequestMapping("/uploadFile") @ResponseBody public String uploadFile(@Reques ...

  9. vue中的表单异步校验方法封装

    在vue项目的开发中,表单的验证必不可少,在开发的过程中,用的是vue+iview的一套,我们知道iview的表单验证是基于async-validator,对于async-validator不熟悉的可 ...

  10. element-ui Form表单校验

    使用element-ui自带的表单校验,注意几个点: 1.el-form通过rules属性,绑定校验规则 2.el-form-item的prop属性,设置为需要校验的字段名 3.提交后二次校验 sav ...

随机推荐

  1. 哲讯科技SAP医疗器械行业ERP解决方案

    哲讯科技SAP医疗器械行业ERP解决方案主要体现在以预测为指导,计划为执行的管理理念,完全做到实时的全过程的质量管理和质量跟踪.并且通过灵活的质量管理模块大大降低因实施GMP管理给企业带来的成本压力. ...

  2. 浅析Winform的可视样式

    每一个C#的Winform项目的Main方法里,都有这么一行代码,那么它究竟是用来做什么的呢? Application.EnableVisualStyles(); 从注释来看,这是一行用作设置样式的代 ...

  3. 【笔记】IDEA中maven导入依赖提示证书错误解决方法

    先是提示:一定要备份配置文件!!! 一定要备份配置文件!!! 一定要备份配置文件!!! 先说原因:idea内置了jre,与你开发用的jre不是同一个软件,你通过命令修改的是开发用的jre的证书库,导入 ...

  4. C++ 17 遍历文件夹图片文件进行循环操作

    #include <filesystem>using namespace std;namespace fs = std::filesystem; string path = filepat ...

  5. ncnn 加载 bin文件时,出错 报异常 0xC0000094:Integer division by zero。

    这次转yolov8.pt 到 onnx 到 ncnn,调用ncnn,加载bin文件时出错报异常 0xC0000094:Integer division by zero. 解决方式: 导出onnx时,加 ...

  6. 微信退费报错:SSLHandshakeException No appropriate protocol (protocol is disabled or cipher suites are inappropr)

    微信退费报错:No appropriate protocol (protocol is disabled or cipher suites are inappropr) javax.net.ssl.S ...

  7. 检测到远端rexec服务正在运行中

    0.系统 AIX7 1.先备份 /etc/inetd.conf文件 2.vi /etc/inetd.conf vi /etc/inetd.conf ##给原来的行加上注释# # exec .... / ...

  8. iras point sources

    Object/Coordinate Source Type Glon Glat Equatorial J2000 19:03:44.3977 +5:09:51.942 Coordinate   38. ...

  9. Docker学习笔记-01 初步了解

    1. 理念:将应用打成镜像,通过镜像成为运行在Docker容器上面的实例,而 Docker容器在任何操作系统上都是一致的,这就实现了跨平台.跨服务器.只需要一次配置好环境,换到别的机子上就可以一键部署 ...

  10. 自动化处理日志脚本 shell

    自动处理脚本 保留7天的,带详细时间戳, #!/bin/sh #description split logs file1=/var/log/messages file2=/var/log/rabbit ...