vue+element项目手机号、邮箱校验保姆级教程

vue+element项目手机号、邮箱校验保姆级教程 (包含注意点)

先看案例：在vue+element项目中给表单中的手机号和邮箱做校验

标题先说注意点 prop黄色框框起来的一定要有

废话不多说上代码
一、hmtl部分

<el-form:model="modifyForm":rules="rules"ref="modifyFormRef"label-width="100px"class="demo-ruleForm"><el-form-item label="手机" prop="mobile"><el-input v-model.number="modifyForm.mobile" maxlength="11"></el-input></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="modifyForm.email"></el-input></el-form-item><el-form-item class="tijiao"><el-button plain @click="handleCancel">取消</el-button><el-button type="primary" @click="add()">新建</el-button></el-form-item></el-form>

二、js部分

<script>
export default {components: {},data() {/* 手机号 */var isMobileNumber = (rule, value, callback) => {if (!value) {return new Error('请输入电话号码')} else {const reg = /^1[3|4|5|7|8][0-9]\d{8}$/const isPhone = reg.test(value)value = Number(value) //转换为数字if (typeof value === 'number' && !isNaN(value)) {//判断是否为数字value = value.toString() //转换成字符串if (value.length < 0 || value.length > 12 || !isPhone) {//判断是否为11位手机号callback(new Error('手机号码格式如:138xxxx8754'))} else {callback()}} else {callback(new Error('请输入电话号码'))}}}/* 邮箱 */var isEmail = (rule, value, callback) => {if (!value) {callback()} else {const reg =/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/const email = reg.test(value)if (!email) {callback(new Error('邮箱格式如:admin@163.com'))} else {callback()}}}return {/* 校验规则 */rules: {mobile: [{ required: true, message: '请输入手机号码', trigger: 'blur' },{ validator: isMobileNumber, trigger: 'blur' }],email: [{ required: true, message: '请输入邮箱', trigger: 'blur' },{ validator: isEmail, trigger: 'blur' }],}}},created() {},methods: {}
}
</script>

三、友情提醒记得对应好你那边的字段
（全网最清晰的vue+element项目手机号、邮箱校验、保姆级教程，你还在等什么CV就完事了。）

四、调用添加接口

提交的按钮

<el-button type="primary" @click="add()">新建</el-button>

需要提交的参数与 rules平级

 modifyForm: {ddress: '',mobile: '',email: '',sex: true,sources: '',wxNickname: '',prefecture: ''},

 /* 添加功能的规则校验 */async add() {this.$refs.modifyFormRef.validate((valid) => {/* 如果不符合校验就返回 */if (!valid) return/* 符合校验调用添加接口 */this.handleAdclick()})},/* 调添加接口 */async handleAdclick() {/* modifyForm为需要传递的参数 */const result = await addCustomer(this.modifyForm)if (result.code === 200) {/* 添加完置空表单 */this.modifyForm = {address: '',mobile: '',email: '',sex: true,sources: '',wxNickname: '',prefecture: ''}this.$message.success('添加成功')this.$router.go(-1)} else {this.$message.error('添加失败')}}

温馨提示：如果以上方法尝试过了，问题还没解决的朋友，如果您不嫌弃，欢迎评论或者私信联系，我会第一时间与您取得联系，和您一起探讨解决问题！绝不收取任何咨询费用！

关键词搜索优化（与文章无关）：vue+element项目手机号、邮箱校验保姆级教程，手机号、邮箱表单校验手机号、邮箱表单校验不灵有问题无法校验。

vue+element项目手机号、邮箱校验保姆级教程相关推荐

快速上手Springboot项目（登录注册保姆级教程）
本文章对SpringBoot开发后端项目结构做了简单介绍,并示范了使用SpringBoot+MySQL实现登录的后端功能,与本博客的另一篇文章 Vue 实现登录注册功能(前后端分离完整案例) | Ma ...
vue+element ui表单校验（邮箱、电话、工商信息）
vue+element ui表单校验(邮箱.电话.工商信息)) Html部分 <template><div><el-steps :active="active& ...
git、github保姆级教程（手把手交）以及如何在github上提交pr，参与开源项目
git.github保姆级教程(手把手交)以及如何在github上提交pr,参与开源项目一.git的安装直接参考 git官方网站:https://git-scm.com/ 二.git的使用(从新手 ...
保姆级教程——将springboot项目部署到阿里云服务器（小白包会）
保姆级教程--将springboot项目部署到阿里云服务器(小白包会) 前言: 昨天本想着看论文,结果发现找的论文和课题不一致.那干点什么好呢?那就把我的毕业设计(一个springboot项目)部署到 ...
Vue脚手架的安装（保姆级教程）
Vue脚手架的安装(保姆级教程) 文章目录 Vue脚手架的安装(保姆级教程) 1.下载vscode 2.node下载 5.Vue脚手架的安装 6.创建Vue项目 7.项目的运行 1.下载vscode ...
win系统的阿里云服务器部署IDEASpringBoot项目保姆级教程
win系统的阿里云服务器部署SpringBoot项目保姆级教程前言配置阿里云服务器配置环境环境配置中的坑还有别的坑的话,私信我我补充......毕竟配置是最基本的,还想咋样... jar包导 ...
【Python黑科技】获取每日一句美句，并定时发送邮件到指定邮箱（保姆级图文+实现代码）
目录实现效果实现思路 1.获取每日一句美句 2.定时发送需要接入时间模块 3.邮件发送实现代码总结欢迎关注『Python黑科技』系列,持续更新中欢迎关注『Python黑科技』系列, ...
信创操作系统--麒麟Kylin桌面版（项目一操作系统安装：分别在虚拟机、物理机和Win10上安装，驱动安装）保姆级教程
信创操作系统–麒麟Kylin桌面版(项目一操作系统安装:分别在虚拟机.物理机和Win10上安装,驱动安装)保姆级教程目录 1. 相关知识 1.1 BIOS概念 1.1.1 传统BIOS(Legac ...
前端学习笔记 HTML5 保姆级教程
HTML5 保姆级教程前端学习路线: HTML→CSS→JavaScript→jQuery→HTML5→CSS3→ES6→Vue.js→webpack→Node.js 除了掌握这些技术,后期我还需要 ...

vue+element项目手机号、邮箱校验保姆级教程

vue+element项目手机号、邮箱校验保姆级教程 (包含注意点)

标题先说注意点 prop黄色框框起来的一定要有

vue+element项目手机号、邮箱校验保姆级教程相关推荐

最新文章

热门文章

vue+element项目 手机号、邮箱校验 保姆级教程

vue+element项目 手机号、邮箱校验 保姆级教程 (包含注意点)

标题先说注意点 prop黄色框框起来的一定要有

vue+element项目 手机号、邮箱校验 保姆级教程相关推荐

最新文章

热门文章

vue+element项目手机号、邮箱校验保姆级教程

vue+element项目手机号、邮箱校验保姆级教程 (包含注意点)

vue+element项目手机号、邮箱校验保姆级教程相关推荐