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

项目中遇到一个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. 高效XML绑定框架JIBX

    高效XML绑定框架JIBX demo源码地址 https://gitee.com/clover-clover/clover.git 具体路径: clover/clover-frame/clover-f ...

  2. pinia学习

    1.安装 yarn add piniaOR 使用npmnpm install piniapinia是Vue的存储库,允许跨组件/页面共享状态.pinia和vuex的作用一样,充当一个存储数据的作用,存 ...

  3. 基于Sobel算子的图像边缘检测

    索贝尔算子(Sobeloperator)主要用于获得数字图像的一阶梯度,是一种离散性差分算子.它是prewitt算子的改进形式,改进之处在于sobel算子认为,邻域的像素对当前像素产生的影响不是等价的 ...

  4. Java基础__04.GUI编程

    GUI编程常见的组件: 窗口 弹窗 面板 文本框 列表框 按钮 图片 监听事件 鼠标操作 键盘事件 GUI简介 GUI的核心技术:Swing AWT,是需要jre环境的. AWT介绍 包含了很多类和接 ...

  5. NetBeans的一些快捷键

    Alt + Insert getter 覆盖toString方法 Shift+ F6 运行当前文件 F6 运行当前项目 Tab 完成代码片段 ctrl+\ 代码补全 Alt + Shift + F格式 ...

  6. 蓝桥杯训练赛二-1199 问题 E: 哥德巴赫曾猜测

    题目描述 德国数学家哥德巴赫曾猜测:任何大于6的偶数都可以分解成两个素数(素数对)的和.但有些偶数可以分解成多种素数对的和,如: 10=3+7,10=5+5,即10可以分解成两种不同的素数对 输入 输 ...

  7. ERA5气压层数据驱动WRF的一些问题

    感谢Dawn的建议,兰溪之水的WRF教程 参考了一些经验,并结合实际后,成功用ERA5驱动WRF.实际上,用ERA5数据驱动WRF的方法和用ERA-Interim 数据驱动WRF极其类似. 总结几点是 ...

  8. mysql数据增量及备份操作

    注:当数据库出现异常的时候,我们可以先恢复最近一次的全量备份,接着将增量备份的文件一个一个按顺序恢复即可实现原来数据库的恢复. 还可以使用innobackupex 备份工具. 备份 # 1,开启 bi ...

  9. recastnavigation计算三角形离给定点最近位置方法简单注释

    三角形 在recastnavigation中,三角形是最基础的元素,很多逻辑都是基于三角形进行的,其中比较常见的一个操作就是计算指定点到某三角形上的最近距离.由于三角形通常代表行走面,而给定点P可能是 ...

  10. 一些test短代码

    #include <stdio.h> int main(){ char ray_tx_pwr[2][3]={{1,2,3},{4,5,6}}; int i = 0; printf(&quo ...