vue element form 自定义校验1(字段校验)

<template><!--model绑定整个form对象的的数据--><!--rules绑定校验规则--><el-form :model="form" :rules="rules" label-width="80px"><el-form-item label="活动名称" prop="name"><!--通过form对象访问key--><el-input v-model="form.name"></el-input></el-form-item><p>{{form.name}}</p></el-form></template><script>
export default {data () {// 校验规则是一个函数变量var checkEmail = (rule, value, cb) => { // 验证邮箱的正则表达式const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/if (regEmail.test(value)) return cb()cb(new Error('请输入合法的邮箱'))}return {form: {name: ''},rules: {name: [{ required: true, message: '不为空', trigger: 'blur' },{ min: 3, max: 10, message: '长度3-10', trigger: 'blur' },{ validator: checkEmail, trigger: 'blur' }//使用自定义校验规则]},ref: ''}}
}
</script>

vue element form 自定义校验1(字段校验)相关推荐

vue element form 自定义校验1(表单校验)
通过ref属性获得表单对象,调用表单对象的validate函数进行表单的整体校验 <template><!--rule ...
element form自定义校验_SpringBoot分组校验及自定义校验注解
前言在日常的开发中,参数校验是非常重要的一个环节,严格参数校验会减少很多出bug的概率,增加接口的安全性.在此之前写过一篇SpringBoot统一参数校验主要介绍了一些简单的校验方法.而这篇则是 ...
vue element form 默认校验
<template><el-form :model="for ...
vue element form中input等组件不能输入值
<el-input v-model="form.inputVal " /> 由于data中form只是一个空对象{},当主动设置 form.inputVal = &qu ...
vue element form ref 重置表单
<template>&l ...
vue element form 表单
<template><el-form :model="form" label-width=&quo ...
vue+element Form键盘回车事件页面刷新解决
问题描述:如下代码所示,使用element-ui 中的el-form组件对table进行条件查询,当查询条件仅有一项时,使用@keyup.enter.native事件绑定回车事件,出现点击回车后,浏览 ...
vue element 框架自定义轮播图，点击上下翻图，并让图片居中
1.素材展示窗口,左侧预览滚动区域按分辨率做一屏最大预览数量做均分(超过最大预览数量是滚动条滑动) 2.左侧预览滚动区域增加浅灰色底色要求与滚动条颜色区分 3.预览滚动区域单个区域高度固定,素材图 ...
vue+element实现银行卡号只输入数字，四个补一个空位，并实现校验
vue+element实现银行卡号只输入数字,四个补一个空位,并实现校验 html 输入框只输入数字 watch 监听实现四个数字补一个空位自定义卡号校验规则 html 输入框只输入数字 // ty ...

vue element form 自定义校验1(字段校验)

vue element form 自定义校验1(字段校验)相关推荐

最新文章

热门文章