Vue 登录手机号、密码格式验证及验证码60s获取

直接上代码：

            <el-input  v-model="phoneRegister" placeholder="请输入手机号"> </el-input><el-input v-model="passwordRegister"  type="password"  placeholder="设置登录密码" show-password clearable/><el-input v-model="captchaRegister" placeholder="输入验证码"><template #append><el-button style="background-color:transparent;color:black;border: none;width: auto;height: auto" :disabled="canSend" @click="captchaSent()">{{content}}</el-button></template></el-input>

data (){return {phoneRegister:'',passwordRegister:'',captchaRegister:'',//手机号验证码content: '获取验证码',sendTime:60,//验证码60s发送一次canSend: false, //添加canSend,false为可用}}，methods:{getCorrect(number) {//验证号码正确性this.correct = false //重置if (number === '') {this.$message.warning("请输入手机号")this.correct = false} else {if (!/^((1[3,5,8,7,9][0-9])|(14[5,7])|(17[0,6,7,8])|(19[1,7]))\d{8}$/.test(number)) {this.$message.warning("手机号格式不正确")this.correct = false} else {this.correct = true;}}},getPasswordCorrect(number) {//验证密码格式正确性if (/[^\w\.\/]/ig.test(number)) {this.$message.warning('密码不能包含中文和空格！');return false}else if (number === '') {this.$message.warning("请输入密码")return false} else if(number.length < 8 || number.length > 20){this.$message.warning("密码小于8位或大于20位")return false}else if(!/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[\(\)])+$)([^(0-9a-zA-Z)]|[\(\)]|[a-z]|[A-Z]|[0-9]){6,}$/.test(number)){this.$message.warning("密码至少包含字母/数字/字符两种组合")return false}else{return true}},}，async captchaSent(){//发送验证码this.getCorrect(this.phoneRegister)if(this.correct == true) {captchaSent(this.phoneRegister, new Date()).then(res => {if(res.code === 200 ){this.$message.success('获取验证码成功')this.canSend = truethis.content = this.sendTime + 's后重新发送';let timer = setInterval(async () => {this.sendTime--this.content = this.sendTime + 's后重新发送';if (this.sendTime < 0) {clearInterval(timer);this.content = '重新发送验证码'this.sendTime = 60this.canSend = false //这里重新开启}}, 1000)}else {this.$message.error('获取验证码失败')}})}},

参考：https://zhangzifan.com/password-regex.html

Vue 登录手机号、密码格式验证及验证码60s获取相关推荐

重拾MVC——第二天：Vue学习与即时密码格式验证
今天是复习MVC的第二天,准备自己写一个后台管理,然后慢慢写大,做全. 个人感觉做 Web 的,前端知识是必备的,所有今天学习了一下 Vue,很多人用这个,我以前没有用过,今天把它补起来. 比较了各个 ...
Spring Boot + Spring-Security实现前后端分离双重身份认证初学者指南（手机号密码JWT + 短信验证码）
折(mo)腾(yu)了好几天,终于把双重身份认证实现了.(账号密码jwt+短信验证码) 看了很多视频,照葫芦画瓢敲了两三次,遇到各种各样的bug,比如循环依赖(通过@PostConstructor+s ...
jsp登录页面密码equals验证出现问题解决办法
从数据库中取出的密码或者用户名后会带有一串的空格所以equals比较时会显示错误使用trim()函数去除空格就可以了运行成功代码如下: login.jsp <%@ page import= ...
Android 手机号格式验证(正则)
这是一个简易版本的,只验证位数和前两位 //判断输入的格式是否为手机号public boolean isPhone(String phone){String regex="^1[345678 ...
使用阿里云短信验证码API发送短信验证码(配置,获取短信验证码,注册,登录,密码重置)
获取阿里云短信验证码需要的配置信息. 如果是新用户,可以免费领取3个月,老用户的话就只能购买了,但是也不贵. 申请短信签名申请短信模板编写发送短信验证码的工具类代码中我已经进行了详细的注释,也写 ...
Android手机号码格式验证(正则)
这是一个简易版本的,只验证位数和前两位 //判断输入的格式是否为手机号public boolean isPhone(String phone){String regex="^1[345678 ...
用javascript写一个简单的登录表单，包含用户名、密码和手机号码。提交数据时验证用户名、密码和手机号输入格式。
题目:写一个用于登录的表单,包含用户名.密码和手机号码.提交数据的时候,要求验证: 1. 用户名必须输入汉字: 2. 密码总共6位,前2位为字母,后4位为数字: 3. 手机号码符合中国大陆手机号码格式 ...
若依项目实现手机号+密码登录且密码验证为自定义加密方式
由于使用若依后台管理系统需要匹配其它平台使用同一套数据库,故需要有相同的加密解密方式,下面分享使用手机号+密码登录且加密解密方式为AES的实现代码. 总体的实现思路是先将若依设置为免密登录,即不使用若 ...
Uni-app 手机号+验证码登录用户名密码登录登出
用户名密码登录,手机号登录用户名密码登录:用了uniapp+uview的$u.debounce防抖方法,再发送请求判断正则以及同意条款勾选后,发起登录请求(参数是用户名和密码),如果请求成功--s ...

Vue 登录手机号、密码格式验证及验证码60s获取

Vue 登录手机号、密码格式验证及验证码60s获取相关推荐

最新文章

热门文章