2022.9.17 vue、element-ui实现登录获取手机验证码，进行手机号校验、验证码CD60秒

一、实现效果：

1、直接点击，不为空校验

2、输入手机号格式不正确时

3、获取完验证码进行读秒

二、页面html

<el-formclass="phone-form"ref="form":model="form"label-position="left"size="small":rules="rules"v-if="!loggingStatus"><el-form-itemprop="phoneNum":rules="rules.phoneNum"ref="phone"><el-inputsize="small"placeholder="请输入手机号"v-model="form.phoneNum"class="input-with-select"><el-select v-model="select" slot="prepend" placeholder="+86"><el-option label="+86" value="+86"></el-option><el-option label="+40" value="+86"></el-option><el-option label="+111" value="+86"></el-option></el-select></el-input></el-form-item><el-form-itemprop="checkCode"><el-inputclass="check-code-box"size="small"v-model.number="form.checkCode"placeholder="请输入验证码"><el-button :disabled="codeCd" size="small" slot="append" @click="handleCaptcha('form')">获取验证码<span v-if="codeCd">({{long}})</span></el-button></el-input></el-form-item><el-form-item><el-button class="custom-button" @click="onSubmit('form')" type="primary">登录</el-button></el-form-item></el-form>

三、vue

data () {const validatePhone = (rule, value, callback) => {if (!value) {callback(new Error('手机号不能为空'))}// 使用正则表达式进行验证手机号码if (!/^1[3456789]\d{9}$/.test(value)) {callback(new Error('手机号格式不正确'))}// 自定义校验规则 需要调用callback()函数！callback()}return {// 登录状态loggingStatus: false,// 验证码是否CDcodeCd: false,// CD长度long: 60,select: '',input: '',form: {phoneNum: null,checkCode: null},rules: {phoneNum: [{ required: true, validator: validatePhone, trigger: 'blur' }],checkCode: [{ required: true, message: '验证码不能为空哦！', trigger: 'blur' }]}}},methods: {// 获取手机验证码handleCaptcha (form) {this.$refs[form].validateField('phoneNum', async (valid) => {if (!valid) {// 获取验证码captcha(this.form.phoneNum)// 开启计时this.codeCd = trueconst timer = setInterval(() => {this.long--if (this.long <= 0) {this.long = 60this.codeCd = falseclearInterval(timer)}}, 1000)} else {console.log('error submit!!')return false}})}}

四、总结

1、进行手机号校验关键在对单个手机号输入框进行校验，需要使用到validateField对部分表单字段进行校验，valid是校验完的提示信息，当valid为空时代表校验成功
2、读秒和设置禁用，在校验成功时设置一个60s计时器，读秒过程禁用按钮，用了element-ui的按钮组件，在读秒过程中给按钮增加disabled属性；读秒过程结束，解除按钮禁用

2022.9.17 vue、element-ui实现登录获取手机验证码，进行手机号校验、验证码CD60秒相关推荐

【vue开发问题-解决方法】（五）vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function
[vue开发问题-解决方法](五)vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function 参考文章: (1)[vue开发问题-解决方法](五) ...
闲云旅游网03（基于vue+element ui）登录注册功能开发
登录功能项目GitHub地址:https://github.com/q2419068625/xianyun 新建登录注册页的布局新建了登录的表单绑定了数据到data rules表单的验证提交数 ...
vue+element ui实现好看的登录界面
闲暇之余使用vue+element ui制作了个登录界面话不多说,先上图界面效果图下面直接上代码: <template><div class="loginbody&q ...
基于Vue+Element UI+Node+MongoDB的医院门诊预约挂号系统
目录概述 3 系统目标 3 需求分析 3 功能需求 3 非功能需求 4 设计 4 数据库设计 4 数据库说明 4 数据结构 4 接口设计 5 登录 5 注册.添加信息 6 查询信息 6 查询全部病人 ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
使用vue+Element ui制作56个民族下拉列表
使用vue+Element ui制作56个民族下拉列表 1.页面 <template><div><el-select v-model="nationvalue& ...

2022.9.17 vue、element-ui实现登录获取手机验证码，进行手机号校验、验证码CD60秒

一、实现效果：

二、页面html

四、总结

2022.9.17 vue、element-ui实现登录获取手机验证码，进行手机号校验、验证码CD60秒相关推荐

最新文章

热门文章