位置: 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口是什么意思?)

  • 实收资本印花税按次还是按年
  • 借款利息抵扣土增
  • 记账王怎么查询凭证
  • 工程预缴税款流程
  • 收到境外汇款怎么处理
  • 购买农产品发票买价含税吗
  • 什么叫外埠存款
  • 委托加工几个点
  • 百望税控盘电子发票
  • 货币资金主要内容
  • 小型微利企业免于填报
  • 异地预缴企业所得税几个点
  • 企业预缴所得税的比例要求
  • 特许权使用费收入确认分录
  • 自然人借款给企业的涉税风险
  • 电子票据查询打印
  • 所得税的税负如何算
  • 税后利润分配需要计提吗
  • 本期应付而未付工资挂账处理?
  • win10蓝牙驱动程序下载
  • macos big sur将安装在macintosh hd
  • 小规模纳税人确认收入时要确认税吗
  • 操作系统的内存映射
  • phpipam使用
  • Sa-Token v.1.31.0 新增拦截器 SaInterceptor 功能说明,以及旧代码迁移示例
  • 跨省不动产登记
  • 待处理财产损益借贷方向
  • 移动加权平均法例题
  • 收到待报解预算收入怎么做账
  • js加密解密源代码
  • 计算工业总产值公式
  • 防伪税控开票系统安装
  • 基本数据结构包括哪些
  • 汇算清缴需要做账吗
  • 职工薪酬在利润表哪里看
  • 股权对价支付
  • 上年度的企业所得税汇算清缴怎么查询
  • 借预收账款贷其他应付款什么意思
  • 贸易净利润
  • mysql是自动提交的吗
  • 固定资产折旧如何计算公式
  • 一般纳税人什么情况可以开3%的发票
  • 留存收益的个别资本成本计算公式
  • mysql子查询详解
  • 成本票可以用在下个季度吗
  • 商业汇票分为哪几种
  • 固定资产资本化后续支出
  • 发票开错抬头做红字发票的账务处理是?
  • 自行申报啥意思
  • 接待客人后的感受和过程
  • 代金券抵帐怎么退款
  • 工程安装公司注册条件
  • 工资表的重要性
  • 存货换入无形资产账务处理
  • 收到红字增值税发票哪里查
  • 采用补偿贸易方式的是
  • mysql爆破字典
  • mysql正则表达式匹配数字
  • macbookpro怎么改系统
  • mac电脑拷贝文件在哪里
  • solaris 安装
  • macbook做热点
  • spmgr.exe - spmgr是什么进程 有什么用
  • uca1
  • win7z
  • 史上最详细的mrtg(Multi Router Traffic Grapher)设置说明
  • linuxwho
  • cocos2dx4.0教程
  • python下读取公私钥做加解密实例详解
  • python运算符的用法
  • unity3d 脚本
  • js实现隔行换色
  • js 返回上一页面并刷新
  • Android ORM之GreenDao学习
  • javascript如何写操作命令
  • 福建税务局电子税务局电话多少
  • 契税完税证明遗失
  • 建筑企业个人所得税管理办法
  • 河北税务官方网页
  • 年终奖怎么报个税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设