Element UI的表单验证

这篇具有很好参考价值的文章主要介绍了Element UI的表单验证。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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文件中指定时间的转换格式文章来源地址https://www.toymoban.com/news/detail-568192.html

/*输出时间的指定格式,并指定时区*/
spring.jackson.time-zone=GMT+8
spring.jackson.date-format=yyyy-MM-dd HH:mm:ss

到了这里,关于Element UI的表单验证的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Element-ui 多表单同时验证

     如上图表单  [列二 列三 ]  由列一循环出来的数据  所用的校验规则相同   方法一:         拿到表单list数据循环遍历(通过正则/其他)进行校验   上图校验按实际需求只要不为空即可 方法二:         通过element表单的rules属性进行校验   定义好rules校验规则配合方法v

    2024年02月16日
    浏览(35)
  • Element UI 表单验证规则动态失效问题

    Element 版本:v2.15.3 如下代码所示:有一个上传文件的 input 组件,在更新的时候,如果不上传文件表示不更新,如果要更新则点击 「重新上传」按钮将上传组件显示出来 也就是如上图:不更新的话,该字段不是必须的,提交的时候就不会被校验,如果更新的话,就要让这个字

    2024年02月08日
    浏览(31)
  • Element UI 多个Form表单同时验证

    这里讲的主要是Element UI 组件的表单验证,Element UI 的Form表单验证是依靠 ref 来进行的,但是当一个页面有用到多个Form表单的时候,又要同时对这多个表单进行验证,这个时候写在后面的Form表单会覆盖前面的样式,导致只会验证最后一个 解决方案:

    2024年02月11日
    浏览(29)
  • 【vue】element-ui的form数组表单验证(循环表单验证)

    基于 vue2.0 的 element-ui 的 form 表单验证比较简单,但是有些同学可能对于 数组类型 的表单验证无从下手,这里我基于一个我自己项目中的例子,展示一下怎么进行数组的表单验证。 项目截图: 上代码,为了让大家看起来比较清晰,我删掉了无关的代码: 咱们把数组验证的部

    2024年02月07日
    浏览(40)
  • vue:element-ui表单动态验证规则

    实现当是否发送消息选择是时,业务类型字段必填。 当你在一个表单中使用 el-form 和 el-form-item 来创建表单项时, el-form-item 的 :rules 属性可以用来设置该表单项的验证规则。我们希望根据用户在 \\\"是否发送消息\\\" 这个表单项中的选择动态设置 \\\"业务类型\\\" 这个表单项的验证规则

    2024年01月23日
    浏览(33)
  • 如何实现element-UI循环表单以及数据验证

    可能看到这篇文章,你很困惑。为啥要循环表单?其实并不难理解,我们以系统设置页面为例,一般直接按照客户需要来写表单就行了。但是吧,慢慢你会发现这并不高效,因为存在很多客户,他们对自己的需求几乎是模糊不清的,系统菜单就会经常变动,这就很浪费时间。

    2024年02月11日
    浏览(32)
  • element ui 自定义校验不进入表单validate验证

    解决表单提交验证时自定义的校验规则错误问题 错误代码: 这段代码中只有value为空、不是整数才执行,当为整数的时候没有返回对于的执行函数callback(); 所以为整数时返回执行函数callback() 正确代码: 结束语: 希望这篇文章能帮助到大家,如有不对之处,还请指正。愿我

    2024年02月11日
    浏览(38)
  • 关闭element UI的弹窗,再次打开显示表单验证提示

    打开弹窗,没有填写任何信息,点击保存按钮,触发了表单的验证提示,没有进行任何操作,点击【关闭按钮】或者【取消按钮】关闭弹窗,再次打开弹窗,仍然显示表单的验证提示信息,   解决方法: 给el-dialog添加@close事件,给取消按钮添加点击事件,在事件中对表单进

    2024年02月15日
    浏览(30)
  • 解决Element-UI清空表单及验证不生效的问题

    由于我将编辑与新增时,表单使用的是同一个data中的数据,这就导致出现了我点击了编辑后,再次点击新增时,出现了数据依旧是刚才编辑表单中的数据。 通过 手动给表单中的字段赋值 ,期初时,能达到清除表单的效果,但是又出现了新的问题。 表单验证不通过。在一打

    2024年02月13日
    浏览(28)
  • Vue + Element ui 实现动态表单,包括新增行/删除行/动态表单验证/提交功能

    原创/朱季谦 最近通过Vue + Element ui实现了动态表单功能,该功能还包括了动态表单新增行、删除行、动态表单验证、动态表单提交功能,趁热打铁,将开发心得记录下来,方便以后再遇到类似功能时,直接拿来应用。 简化的页面效果图如下: 最开始,我是用了纯粹的表格形

    2024年02月04日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包