一、效果展示

二、代码部分

1、html部分

<el-form-item label="手机号"  prop="phone"><el-input style="width: 320px" v-model="regForm.phone" clearable></el-input>
</el-form-item>
<el-form-item label="验证码"  prop="code"><el-input style="width: 320px" v-model="regForm.code" clearable><el-buttonslot="suffix"style="color: blue;float: right":disabled="disabled"@click="getCode">{{btnTxt}}</el-button></el-input>
</el-form-item>

2、vue.js部分

<script>
import instance from "../utils/request";export default {name: "register",data() {let validatePhone = (rule,value,callback)=>{/*console.log(rule);console.log(value);console.log(callback);*/if (!value){callback(new Error('手机号不能为空'));}//使用正则表达式进行验证手机号码if (!/^1[3456789]\d{9}$/.test(value)){callback(new Error('手机号不正确'));}//自定义校验规则 需要调用callback()函数！callback();};return {//验证码部分所需的数据btnTxt:"获取验证码",disabled:false,time:0,regForm: {},  // 注册表单对象code: '',   // 验证码rules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' }],phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],}};},methods: {//获取手机验证码方法getCode(){//1.校验手机号码if (!this.regForm.phone){//手机号校验不通过this.$message({message: '请输入手机号码！',type: 'warning',});}else if (!/^1[3456789]\d{9}$/.test(this.regForm.phone)){//此处失去焦点后自动触发校验手机号规则}else {//2.【手机号码校验通过】发送axios请求 获取验证码this.time = 30;   //设置倒计时的时间（单位：秒）this.disabled = true;this.timer();     //调用倒计时方法instance.get('/user/getCode?phone=' + this.regForm.phone).then(res=>{console.log(this.regForm.phone);if (res.data.state){//短信验证码发送成功时的消息提示this.$message({message: res.data.msg,type: 'success',});}else {//短信验证码发送失败时的消息提示this.$message({message: res.data.msg,type: 'warning',});}})}},//倒计时方法timer() {if (this.time > 0) {this.time--;console.log(this.time);this.btnTxt = this.time+ "s后重新获取验证码";setTimeout(this.timer, 1000);} else{this.time = 0;this.btnTxt = "获取验证码";this.disabled = false;}},}
}
</script>

使用Vue+ElementUI实现的手机验证码校验、倒计时和禁用效果相关推荐

SpringBoot+Vue项目中实现登录验证码校验
SpringBoot+Vue项目中实现登录验证码校验在各大项目中,为保证数据的安全性,通常在登录页面加入验证码校验,以防止爬虫带来的数据泄露危机.本文将介绍在前后端分离的项目中,怎样实现图形验证码校 ...
实名认证（二要素校验）-含手机验证码校验
1.业务介绍实名认证,说白了就是验证客户端用户的这个人真实性,可采用的第三方服务有高级点的如人脸骨骼识别,声音识别,瞳孔识别等等.我们采用简单的身份证.姓名.手机号3要素识别方式. 2.实现及代码 ...
vue element-ui select 多选验证不通过问题处理
问题描述在使用element form表单提交时,会涉及到下拉框el-select的使用,根据具体需求可设置为单选或者多选,默认为单选.当需求变更时,需要从单选改成多选,只需在el-select 标 ...
vue+ElementUI 实现管理端照片墙（或广告位）效果
场景:在管理端配置照片墙或者广告位先上效果图: 步骤: 首先布局html结构: <template><div><el-form :inline="true&q ...
VUE.JS邮箱、手机、车牌自定义验证规则
VUE JS邮箱与手机验证规则 // 自定义邮箱规则var checkEmail = (rule, value, callback) => {const regEmail = /^\w+@\w+ ...
elementui 嵌套表单验证_vue elementUI 表单嵌套验证的实例代码
一:表单一级验证 element中from组件内表单验证通过使用el-form标签,绑定model和rules属性进行表单验证简单的表单验证很简单,在prop内绑定验证属性,然后在rules对象内定 ...
3、Vue+ElementUI制作用户登录页面
前面两篇简单了解了一下vue和SPA,现在来用Vue+ElementUI做一个用户登录页面,ElementUI是Element出的一套针对vue的UI库,类似的UI库非常多,ElementUI只是其中 ...
element手机验证格式_基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)...
前言开发过程中遇到了一个需求,根据用户选择的联系方式,动态改变输入框的检验条件,并且整个表单是可以增加的在线访问:动态表单校验 github(欢迎star): https://github.com ...
vue element-ui 手机号校验验证码校验获取验证码倒数60秒无样式实现
这段时间被迫搞前端搞裂开了,记录一下手机号验证码校验登录的极简无样式前端实现巨丑!希望大佬们不介意下面是先演示效果点击登陆后显示校验信息输入手机号点击获取验证码输入符合校验的内容后点击登录提 ...

使用Vue+ElementUI实现的手机验证码校验、倒计时和禁用效果

一、效果展示

二、代码部分

1、html部分

2、vue.js部分

使用Vue+ElementUI实现的手机验证码校验、倒计时和禁用效果相关推荐

最新文章

热门文章