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

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

点击登陆后显示校验信息
输入手机号点击获取验证码
输入符合校验的内容后点击登录提示成功

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

<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

vue element-ui 手机号校验验证码校验获取验证码倒数60秒无样式实现相关推荐

JS点击获取验证码后60秒内禁止重新获取（防刷新）
JS点击获取验证码后60秒内禁止重新获取(防刷新) 参考 · 阅读文章: JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效) 注意: 场景:在登录页点击发送啊验证码按钮,开始进入倒计时,在第3 ...
JavaScript获取验证码，60秒倒计时方法
html <div class="item-input code-box"><input type="text" class="us ...
获取验证码倒计时60秒
<template><view class="content"><view class="inps"><input c ...
vue+element ui表单校验（邮箱、电话、工商信息）
vue+element ui表单校验(邮箱.电话.工商信息)) Html部分 <template><div><el-steps :active="active& ...
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
【vue开发问题-解决方法】（五）vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function
[vue开发问题-解决方法](五)vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function 参考文章: (1)[vue开发问题-解决方法](五) ...
vue+element项目手机号、邮箱校验保姆级教程
vue+element项目手机号.邮箱校验保姆级教程 (包含注意点) 先看案例:在vue+element项目中给表单中的手机号和邮箱做校验标题先说注意点 prop黄色框框起来的一定要有废话不多 ...
Vue+Element UI 下，如何给一个表单设置自定义规则或多个验证规则（：rules）
依旧是公司里那个Vue+Element UI的项目.今天遇到了一个新的问题:表单中某个选择器的值不同,控制着下面表单内容是否显示. 大概就是这个样子.由后台返回的"发放方式"的数值 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...

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

vue element-ui 手机号校验验证码校验获取验证码倒数60秒无样式实现相关推荐

最新文章

热门文章

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

vue element-ui 手机号校验 验证码校验 获取验证码倒数60秒无样式实现相关推荐

最新文章

热门文章

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

vue element-ui 手机号校验验证码校验获取验证码倒数60秒无样式实现相关推荐