elementui 自定义表单验证邮箱、电话号码

1.html部分:

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="125px" class="demo-ruleForm"><el-form-item label="联系电话:" prop="buyerPhone" required><el-input v-model="ruleForm.buyerPhone"></el-input></el-form-item><el-form-item label="Email:" prop="buyerEmail" required><el-input v-model="ruleForm.buyerEmail"></el-input></el-form-item>
</el-form>

2.js部分:

data () {var checkPhone = (rule, value, callback) => {const phoneReg = /^1[34578]\d{9}$$/if (!value) {return callback(new Error('电话号码不能为空'))}setTimeout(() => {// Number.isInteger是es6验证数字是否为整数的方法,实际输入的数字总是识别成字符串// 所以在前面加了一个+实现隐式转换if (!Number.isInteger(+value)) {callback(new Error('请输入数字值'))} else {if (phoneReg.test(value)) {callback()} else {callback(new Error('电话号码格式不正确'))}}}, 100)}var checkEmail = (rule, value, callback) => {const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/if (!value) {return callback(new Error('邮箱不能为空'))}setTimeout(() => {if (mailReg.test(value)) {callback()} else {callback(new Error('请输入正确的邮箱格式'))}}, 100)}
return {ruleForm: {buyerPhone: '',buyerEmail: ''},rules: {buyerPhone: [{ validator: checkPhone, trigger: 'blur' }],buyerEmail: [{ validator: checkEmail, trigger: 'blur' }]}
}

elementui 自定义表单验证邮箱、电话号码相关推荐

记录element-ui自定义表单验证上传身份证正反面
大概是这个样式两个上传组件写在一个form-item里进行自定义表单验证每次验证,通过判断上传组件绑定的值进行判断,callback不同的提示错误 <template><div& ...
element-ui 自定义表单验证 , 但是不出现小红心解决方案
rules: {// name: [{ required: true, message: "请输入公司名称", trigger: "blur" }],name: ...
ElementUI使用问题记录：设置路由+iconfont图标+自定义表单验证
一.关于导航怎么设置路由 1.在el-menu这个标签的属性中添加 router ,官方文档的解释是:启用vue-router 这种模式 2.在el-menu-item标签中的index属性直接书写路 ...
vue 表单验证正则_vue elementui form表单验证的实现
最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...
ElementUI的表单验证及常用规则
element-cn.eleme.io/#/zh-CN/com- 在官网上有关于form组件的详细介绍这里总结了几个常用的规则,方便下次使用必填,必选,邮箱,手机号,时间,数字,数组,字符长度, ...
elementUI框架:表单验证书写方式
验证form,注意prop.rules指定的名字需一致: 也可以单独指定具体某一验证::rules="$rules.Login.userName" 校验方式 this.$refs[ ...
Django 表单验证之自定义表单验证器
本文基于Django 表单验证一文,补充完善表单验证器之自定义表单验证器具体步骤总结如下: 第一:在formValidation.py 文件中,添加自定义名称敏感验证器(NameValidatio ...
表单验证与自定义表单验证
/ 验证规则 rules: { // 多个验证用数组单个验证用对象// 验证账号acc: [{ required: true, message: '不能为空', trigger: 'blur' }, ...
iview自定义表单验证
@[TOC] iview自定义表单验证之前总结过iview简单表单验证: https://blog.csdn.net/A_LL_IS_WELL/article/details/111227468ht ...

elementui 自定义表单验证邮箱、电话号码

elementui 自定义表单验证邮箱、电话号码相关推荐

最新文章

热门文章