element-ui组件自定义表单验证(验证手机号码和邮箱为例)

      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px"><el-form-item label="邮箱" prop="email"><el-input v-model="addForm.email"></el-input></el-form-item><el-form-item label="手机" prop="mobile"><el-input v-model="addForm.mobile"></el-input></el-form-item></el-form>

 export default {data():{// 验证邮箱的规则var checkEmail = (rules,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('请输入合法的邮箱'))}// 验证手机号的规则var checkMobile = (rules,value,cb) => {const regMobile = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/if(regMobile.test(value)){return cb()}cb(new Error('请输入合法的手机号'))}}return{addFormRules: {email: [{ required: true, message: '请输入邮箱', trigger: 'blur' },{validator:checkEmail,trigger:'blur'}],mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' },{validator:checkMobile,trigger:'blur'}],}}}

效果如图所示

输入错误的邮箱和手机号会提示

这是输入正确格式的手机号和邮箱

element-ui组件自定义表单验证(验证手机号码和邮箱为例)相关推荐

Element UI 表格嵌套表单、输入框、选择框
Element UI 表格嵌套表单.输入框.选择框有时候我们需要一次添加多条数据,这个时候我们就可以使用表格嵌套表单.输入框和选择框等等的方式,添加保存和修改数据. 直接展示代码 <el-fo ...
修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...
laravel 自定义表单请求验证增加 emoji 过滤
表单请求验证增加一个自定义类过滤 emoji // 在 app/Providers/AppServiceProvider.php 中use use Illuminate\Support\Facades ...
基于AntDesign UI的自定义表单
自定义表单主要技术框架: Vue2.x // 主框架 AntDesign-Vue // ui框架动图访问地址入口(服务器配置较低,请耐心等待网站加载(⓿_⓿)) 查看步骤登录→表单页→自定义 ...
element UI 组件封装--搜索表单（含插槽和内嵌组件）
组件封装–搜索表单 searchForm.vue 可根据需要,参考姓名和工作自行增加更多常用的默认搜索项 <template><div style="padding: 30 ...
DedeCMS实现自定义表单提交后发送指定QQ邮箱法
https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=monline_3_dg&wd=dedecms 邮箱&oq=d ...
vue + element 自定义表单验证的时候需要通过请求后端接口验证
vue + element 自定义表单验证的时候需要通过请求后端接口验证做vue项目的时候遇到了一个需求,在验证某个表单项时不仅需要是必填项而且要去通过接口校验是否有重复值. // templat ...
element ui form循环嵌套表单及嵌套表单的验证方法（校验）
首先看看成果表单一级.二级嵌套的增加.删除一级.二级嵌套的表单的验证知识点一级嵌套循环:<div v-for="(item, index) in form.product ...
vux使用方法 php,如何使用vux-ui自定义表单验证
这次给大家带来如何使用vux-ui自定义表单验证,使用vux-ui自定义表单验证的注意事项有哪些,下面就是实战案例,一起来看一下. 初学框架vue搭配vux使用发现这个UI库使用有些力不从心.下面说说 ...

element-ui组件自定义表单验证(验证手机号码和邮箱为例)

element-ui组件自定义表单验证(验证手机号码和邮箱为例)相关推荐

最新文章

热门文章