位置: IT常识 - 正文
vue element-ui 手机号校验 & 验证码校验 & 获取验证码倒数60秒无样式实现(elementui 手机端)
发布时间：2024-01-14vue element-ui 手机号校验 & 验证码校验 & 获取验证码倒数60秒无样式实现 
本文链接地址:https://www.jiuchutong.com/zhishi/295192.html
转载请保留说明！
推荐整理分享vue element-ui 手机号校验 & 验证码校验 & 获取验证码倒数60秒无样式实现(elementui 手机端)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:elementui兼容手机吗,vue3 element ui,vue3 element ui,vue-element-ui,elementui兼容手机吗,elementui兼容手机吗,element ui mobile,element ui mobile,内容如对您有帮助，希望把文章链接给更多的朋友！
这段时间被迫搞前端搞裂开了，记录一下手机号验证码校验登录的极简无样式前端实现 巨丑！希望大佬们不介意 下面是先演示效果
点击登陆后显示校验信息
输入手机号点击获取验证码
输入符合校验的内容后点击登录提示成功
无后端交互！！！！ 非常非常简单的功能，我觉得这是个万能模板，全部代码如下。
<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
下一篇：GPT-4 API 接口调用及价格分析(gpio口是什么意思?)
