位置: IT常识 - 正文

vue element-ui 手机号校验 & 验证码校验 & 获取验证码倒数60秒无样式实现(elementui 手机端)

编辑:rootadmin
vue element-ui 手机号校验 & 验证码校验 & 获取验证码倒数60秒无样式实现

推荐整理分享vue element-ui 手机号校验 & 验证码校验 & 获取验证码倒数60秒无样式实现(elementui 手机端),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:elementui兼容手机吗,vue3 element ui,vue3 element ui,vue-element-ui,elementui兼容手机吗,elementui兼容手机吗,element ui mobile,element ui mobile,内容如对您有帮助,希望把文章链接给更多的朋友!

这段时间被迫搞前端搞裂开了,记录一下手机号验证码校验登录的极简无样式前端实现 巨丑!希望大佬们不介意 下面是先演示效果

vue element-ui 手机号校验 & 验证码校验 & 获取验证码倒数60秒无样式实现(elementui 手机端)

点击登陆后显示校验信息

输入手机号点击获取验证码

输入符合校验的内容后点击登录提示成功

无后端交互!!!! 非常非常简单的功能,我觉得这是个万能模板,全部代码如下。

<template><el-form ref="loginForm" :model="form" :rules="rules" :inline="true"><el-form-item label="手机号" prop="phone"><el-input type="text" maxlength="11" placeholder="手机号" style="width: 250px" v-model="form.phone" /></el-form-item><el-form-item label="验证码" prop="code"><el-input type="text" maxlength="6" placeholder="验证码" v-model="form.code" style="width: 250px" /><el-button :disabled="disabled" @click="getCode">{{ valiBtn }}</el-button></el-form-item><el-form-item><el-button type="primary" @click.prevent="onSubmit('loginForm')">登 录</el-button></el-form-item></el-form></template><script>export default {data() {var checkPhone = (rule, value, callback) => {if (value === "") {callback(new Error("请输入绑定的手机号码"))} else if (!/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(value)) {callback(new Error("请输入正确的手机号码"))} else {callback()}};var checkCode = (rule, value, callback) => {if (value === "") {callback(new Error("请输入验证码"))} else if (!/^[0-9]+$/.test(value) || !/^\d{6}$/.test(value)) {callback(new Error("请输入6位数字的验证码"))} else {callback()}};return {form: {phone: '',code: ''},autoLogin: false,rules: {phone: [{ validator: checkPhone, required: true, trigger: 'blur' }],code: [{ validator: checkCode, required: true, trigger: 'blur' }]},valiBtn: '获取验证码',disabled: false,}},methods: {//获取验证码 并只验证手机号 是否正确getCode() {this.$refs['loginForm'].validateField('phone', (err) => {if (err) {console.log('未通过')return;} else {console.log('已通过')console.log(this.form.phone)this.tackBtn(); //验证码倒数60秒}})},tackBtn() { //验证码倒数60秒let time = 60;let timer = setInterval(() => {if (time == 0) {clearInterval(timer);this.valiBtn = '获取验证码';this.disabled = false;} else {this.disabled = true;this.valiBtn = time + '秒后重试';time--;}}, 1000);},onSubmit(formName) { //点击登录 验证手机& 验证码是否符合条件this.$refs[formName].validate((valid) => { // 为表单绑定验证功能if (valid) {this.$alert("成功", "提示")}});},},}</script>

需要的自取,涂涂改改就能用!就是需要自己调样式~

重新发了一个好看点的版本,需要的看一下,用了对话框 https://blog.csdn.net/ZZDT099/article/details/128498405?spm=1001.2014.3001.5502

本文链接地址:https://www.jiuchutong.com/zhishi/295192.html 转载请保留说明!

上一篇:解决前端“\n”不换行问题(解决前端跨域问题)

下一篇:GPT-4 API 接口调用及价格分析(gpio口是什么意思?)

  • 鸿蒙怎么把应用变成卡片(鸿蒙怎么把应用移到sd卡)

    鸿蒙怎么把应用变成卡片(鸿蒙怎么把应用移到sd卡)

  • QQ浏览器文件怎么把图片导入(qq浏览器文件怎么查找关键字)

    QQ浏览器文件怎么把图片导入(qq浏览器文件怎么查找关键字)

  • 剪映怎么改变视频尺寸(剪映怎么改变视频方向)

    剪映怎么改变视频尺寸(剪映怎么改变视频方向)

  • 手机拍屏幕如何去波纹(手机拍屏幕如何去波纹-步骤须知)

    手机拍屏幕如何去波纹(手机拍屏幕如何去波纹-步骤须知)

  • 系统已禁止安装怎么办(系统已禁止安装iqoo)

    系统已禁止安装怎么办(系统已禁止安装iqoo)

  • 苹果自带的快捷被删了(苹果自带的快捷指令)

    苹果自带的快捷被删了(苹果自带的快捷指令)

  • 华为相机黑屏没反应(华为相机黑屏没有声音)

    华为相机黑屏没反应(华为相机黑屏没有声音)

  • 迷你4ipad尺寸(迷你苹果ipad4多大尺寸)

    迷你4ipad尺寸(迷你苹果ipad4多大尺寸)

  • 抖音特效视频制作软件有哪些(抖音特效视频制作方法)

    抖音特效视频制作软件有哪些(抖音特效视频制作方法)

  • iphonexs拉不出控制中心(苹果x拉不出控制中心)

    iphonexs拉不出控制中心(苹果x拉不出控制中心)

  • ipad需要密码已启动触控id(ipad显示需要密码以启用id怎么办)

    ipad需要密码已启动触控id(ipad显示需要密码以启用id怎么办)

  • 爱奇艺为什么下载不了电影(爱奇艺为什么下载的视频看不了)

    爱奇艺为什么下载不了电影(爱奇艺为什么下载的视频看不了)

  • 打印机无驱动程序怎么办(打印机无驱动程序)

    打印机无驱动程序怎么办(打印机无驱动程序)

  • 微信能发30分钟视频吗(微信能发30分钟的录音吗)

    微信能发30分钟视频吗(微信能发30分钟的录音吗)

  • 怎么把手机软件传到另一个手机(怎么把手机软件变成安装包)

    怎么把手机软件传到另一个手机(怎么把手机软件变成安装包)

  • 苹果xsmax怎么把声音调大(苹果xsmax怎么把两张照片合在一起)

    苹果xsmax怎么把声音调大(苹果xsmax怎么把两张照片合在一起)

  • iqoo怎么手动打开液冷(iqoo手机怎么叫)

    iqoo怎么手动打开液冷(iqoo手机怎么叫)

  • 小米6怎么设置信息显示(小米6怎么设置锁屏壁纸)

    小米6怎么设置信息显示(小米6怎么设置锁屏壁纸)

  • 韩国手机充电需要转换器吗(去韩国手机充电器要买转换插头吗)

    韩国手机充电需要转换器吗(去韩国手机充电器要买转换插头吗)

  • 同程砍价没砍完能提现吗(同程下单砍后价)

    同程砍价没砍完能提现吗(同程下单砍后价)

  • mp1602是什么手机(mp1512是什么手机)

    mp1602是什么手机(mp1512是什么手机)

  • 小米nfc是什么(vivo手机有nfc吗)

    小米nfc是什么(vivo手机有nfc吗)

  • 荣耀v10指纹键怎么换(荣耀v10指纹键怎么关闭)

    荣耀v10指纹键怎么换(荣耀v10指纹键怎么关闭)

  • Win11预览版更新失败错误代码0x800f0831怎么解决?(win11预览版更新界面)

    Win11预览版更新失败错误代码0x800f0831怎么解决?(win11预览版更新界面)

  • 纳税义务发生时间和申报纳税的时间
  • 未分配利润与净利润不相等
  • 企业出租房产增值税率
  • 地方教育费附加的计税依据是什么
  • 房屋折旧计提完成价格还能调整吗
  • 发票报送失败怎么弄
  • 建筑企业增值税纳税义务发生时间如何确定
  • 企业报废固定资产的净损失应确认为企业的费用
  • 境外机构可以开通b股账户
  • 员工食堂报销的费用怎么做分录
  • 用友软件销售操作流程
  • 个人独资公司可以控股其他公司吗
  • 企业购买房产如何列入投资计划的
  • 委托加工的账务处理
  • 公司车辆出售给个人怎么做账
  • 进项税认证怎么做分录
  • 公司收到法院的欠款起诉书,应该怎么办
  • 土地增值税清算利息扣除规定
  • 0税率发票纳税申报如何填报
  • 旅游服务费可以抵扣增值税
  • 是否只有首次购买税控盘可以全额抵减增值税
  • 三免三减半税收优惠政策文件
  • 其他收益等于什么
  • 进口商品的关税计入入账价值吗
  • 申报工伤的流程及时间
  • 企业所得税税率2.5% 5% 25%
  • 股权筹资的概念
  • PRISMSTA.EXE - PRISMSTA是什么进程 有什么用
  • macos big sur最新版本
  • 公积金补缴上月算断缴吗
  • php cgi配置
  • 双系统启动界面
  • win 8和win 7有什么区别
  • 公司刚成立多久可以注销
  • PHP:curl_multi_close()的用法_cURL函数
  • laccadive islands
  • 未签订销售合同
  • 提取企业发展基金用到银行存款科目吗
  • PHP:imagecolorclosesthwb()的用法_GD库图像处理函数
  • 转让存货属于什么收入
  • 怎么开通公众号微信公众平台
  • 合伙企业利润分配首要依据
  • 前端数据导出为excel
  • 微信多开使用方法
  • php+web
  • 商贸公司用什么名字最好
  • 小规模纳税人增值税月末处理
  • 如何理性看待国企改革
  • 购入固定资产怎么做账务处理
  • 打印银行电子回单在打印机上怎么设置A5
  • 结转成本相关内容有哪些
  • 简易征收3%的征收率是什么意思
  • 费用科目什么意思
  • 收付实现制的适用范围
  • 注销公司详细步骤
  • 利润表的期末余额怎么算出来的
  • 进账税发票未认账怎么办
  • 应交增值税进项税额月底怎么处理
  • 无形资产根据什么科目填列
  • 已付款未认证发票怎么做账
  • 厂家返利怎么入账
  • 餐饮开票税率
  • 融资手续费计入长期待摊
  • 事业单位预收账款
  • mysql 性能调优参数
  • sql servers
  • ubuntu系统怎么用
  • 大白菜u盘备份win10教程
  • Windows Server 2008网络中禁止迅雷下载
  • redhat系列
  • centos7服务器配置
  • windows boot.ini文件
  • linux内核编程指南
  • cocos2d官网
  • jquery 插件编写
  • python如何运用
  • 房产税从价计征的计税依据
  • 广东税务app申报不小心点到了不再提示
  • 苹果官网手机号码无效
  • 税务违法怎么处理
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设