Element UI的表单验证

2023-11-02

Element UI表单有3种验证方式:
1、在表单中加rules属性,然后data里面写具体的验证规则就好
rules里面可以写正则表达式验证。

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        	<el-form-item label="项目编码" prop="code">
            	<el-input v-model="ruleForm.code"></el-input>
        	</el-form-item>
        </el-form>       //css中写:rules动态绑定data中数据
        //data中写rules规则,是一个数组,名字是标签里面的prop属性值
        rules: {
            code: [
            { required: true, message: '请输入项目编码', trigger: 'blur' },
          ]
        }

2、在内部添加规则

<el-form-item label="邮箱号" rules="[{required:true,message:'请输入邮箱号',trigger:'blur'},{validator: yanz, trigger: 'blur'}]" :label-width="formLabelWidth" prop="email">
    <el-input v-model="form.email" autocomplete="off"></el-input>
</el-form-item>

3、自定义函数验证

let validPassword=(rule,value,callback)=>{
            let reg= /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{4,20}$/
            if(!reg.test(value)){callback(new Error('密码必须是由4-20位字母+数字组合'))
            }else{
                callback()
            }
        };
        let yanz=(rule,value,callback)=>{
            if(value!==this.form.pwd){
                callback(new Error('两次密码不一致'))
            }
        }

规则里面是{ validator: yanz, trigger: ‘blur’ }validator关键字,后面是自定义函数名

spring前后台日期格式和时间差问题

因为中国属于东八区,所以时间差了8小时

1、那么在后台的实体类的时间字段上加两个注解

@JsonFormat(pattern="yyyy-MM-dd HH:mm:ss", timezone="GMT+8")
@DateTimeFormat(pattern="yyyy-MM-dd HH:mm:ss")
private Date createTime; //创建时间

2、在application.properties文件中指定时间的转换格式

/*输出时间的指定格式,并指定时区*/
spring.jackson.time-zone=GMT+8
spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Element UI的表单验证 的相关文章

随机推荐

  • java获取客户端操作系统_根据User-Agent,获得客户端浏览器和操作系统的信息

    碰到取客户端浏览器和操作系统信息的问题 网上找了很久 大多都是在页面中嵌入JS实现的 无法满足我的要求 所以 就自己写了个方法 可以在servlet中取到 我是根据每个浏览器User Agent的特征 来判断的 在windows xp中已测
  • 汇编实现排序——希尔排序

    希尔排序是把记录按下标的一定增量分组 对每组使用直接插入排序算法排序 随着增量逐渐减少 每组包含的关键词越来越多 当增量减至1时 整个文件恰被分成一组 算法便终止 以下是汇编实现的代码 S0 SEGMENT STACK DW 20 DUP
  • RabbitMQ学习(四)——高级特性

    RabbitMQ高级特性 1 1 消息的可靠投递 1 1 1 消息发送端 在使用RabbitMQ的时候 作为消息发送方式希望杜绝任何消息丢失或者投递失败的场景 RabbitMQ为我们提供了两种方式用来控制消息的投递可靠性模式 confirm
  • IDEA断点调试技巧,多张动图包教包会。

    文章目录 一 怎么开启断点调试 二 调试界面咋那么多按钮 1 返回断点位置 2 步过 3 步入 4 5 强制步入 步出 6 回退断点 7 断点跳到光标处 8 表达式计算 9 恢复程序 10 停止程序 11 查看所有断点 12 禁用断点 13
  • vs2017community进行DirectX开发_问题小节

    一 下载并安装vs及DirectX 1 vs版本 vs2017community 免费的 百度就有 2 我下载的DirectX版本 DXSDK Jun10 链接https pan baidu com s 1w7np5N E6QYqJXIr0
  • 微信小程序年月日时分选择器的实现

  • 基于VGG深度学习神经网络的猫狗数据集分类

    摘要 VGG网络是由牛津大学视觉几何组完成的基于深度卷积神经网络的大规模图像识别架构 该网络参考了AlexNet ZFNet OverFeat等经典的网络架构 从而得出的 这个架构参加了ILSVRC 2014比赛 取得了定位冠军 分类亚军的
  • 苹果App Store程序提交审核指南中文版

    注 lt 苹果应用商店审核指南 gt 中文翻译最近一次更新为2013 03 04 文中红色部分是相对于2013 03 04版本的新增内容 绿色部分代表更改的内容 蓝色表示苹果相关官方文档的链接 前言 感谢您付出宝贵的才华与时间来开发iOS应
  • cannot import name ‘__new_empty_tensor‘ 升级版本后依旧出现问题

    问题描述 原因说明 这是因为包版本过低导致的 升级到torchvision 0 9 0就没有这个问题了 后续问题 我发现更新了版本依旧出现 后面发现因为我是多版本Python 运行的时候使用了默认环境 更新包在另一个环境 所有出现了问题 解
  • 含源码,用Python实现浪漫烟花

    目录 前言 环境准备 代码编写 效果展示 前言 Python实现浪漫的烟花特效 现在很多地方都不能放烟花了 既然看不到 那作为程序猿的我们还不能自己用代码做一个吗 今天就带大家用代码做一个烟花特效吧 环境准备 这里使用到的库有 pygame
  • Spring 启动详解

    Springboot启动流程 方法入口 org springframework boot SpringApplication run java lang String StopWatch 开启 公开总运行时间和每个命名任务的运行时间 get
  • 经典的ABA问题与解决方法

    1 AbA问题的产生 要了解什么是ABA问题 首先我们来通俗的看一下这个例子 一家火锅店为了生意推出了一个特别活动 凡是在五一期间的老用户凡是卡里余额小于20的 赠送10元 但是这种活动没人只可享受一次 然后火锅店的后台程序员小王开始工作了
  • C语言中的二级指针(双指针)

    原创作品 转载请标明出处 http blog csdn net yming0221 article details 7220688 C语言更多查看 C语言使用注意事项 一 C语言使用注意事项 二 C语言使用注意事项 三 二级指针又叫双指针
  • el-table实现自适应高度滚动,并处理fixed的问题

    需求 页面只有一页 不能滚动 需要对长的table在内部设置滚动 设置Scss el table自身拥有 flex 1 这项css规则 需要先为table的父级容器设置display flex flex direction column 这
  • iOS音视频—目录

    What you cannot avoid welcome 无法避免的事 就坦然接受 OpenVC iOS音视频 OpenCV初体验马赛克的实现 Shell脚本语言 基础 iOS音视频 Shell脚本语言 第一个脚本应用 iOS音视频 Sh
  • 机器学习(九)------K-Means实现鸢尾花聚类

    机器学习 九 无监督K Means聚类 1 K Means聚类算法流程 误差平方和准则函数 2 K Means实现鸢尾花聚类 import numpy as np import pandas as pd import matplotlib
  • 一文告诉你如何在Linux中设置定时清除运行内存(buff_cache)的脚本

    一文告诉你如何在Linux中设置定时清除运行内存 buff cache 的脚本 前语 1 查看内存缓存状态 2 配置清理缓存的脚本 2 1 新建或打开脚本 2 2 clear buff cache配置文件中增加如下代码 3 设置定时任务 大
  • 最新Web前端面试题精选大全及答案

    目录 HTML CSS相关 Javascript相关 三者的异同 Vue相关 55 Vue路由懒加载 按需加载路由 React相关 react 生命周期函数 为什么虚拟 dom 会提高性能 必考 组件的 状态 state 和属性 props
  • Kali-工具-sqlmap常见用法

    SQLmap常见用法 r 这个参数是将 抓到的请求包复制一个文件中然后使用此参数进行扫描 get post提交方法都支持 例如 rp txt 是抓取的数据包 sqlmap r rp txt 也可以加 p 指定注入点 sqlmap r rp
  • Element UI的表单验证

    Element UI表单有3种验证方式 1 在表单中加rules属性 然后data里面写具体的验证规则就好 rules里面可以写正则表达式验证