2021-11-05

最新推荐文章于 2025-05-24 15:24:14 发布

菜鸟妙妙不妙

最新推荐文章于 2025-05-24 15:24:14 发布

阅读量116

点赞数

分类专栏： 2021-11 文章标签： javascript uni-app vue.js

本文链接：https://blog.youkuaiyun.com/weixin_51937505/article/details/121167486

版权

2021-11 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了使用Vue.js进行手机号验证和注册过程的实现步骤，包括输入手机号、获取验证码、验证码倒计时、校验手机号和验证码的正确性，以及注册表单的校验方法。通过手机号正则表达式、定时器和HTTP请求发送验证码，并在用户输入错误时显示提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取验证码-完成注册

先说一下思路，
1.输入手机号
2.点击获取验证码（判断手机号是否正确 ==> 验证码倒计时 ==>判断验证码是否正确）。

1、输入手机号：

<input class="conInp" v-model="step1Params.mobile" type="text" />

验证码和手机号放在 step1Params 里。

	step1Params: {
					mobile: '',
					sms_code: ''
				},

2、点击获取验证-判断手机号是否正确

2.1

	getCode() {
				const reg = /^1(3|4|5|6|7|8|9)\d{9}$/
				if (this.getCodeisWaiting) {
					return;
				}
				//校验手机号码
				if (!reg.test(this.step1Params.mobile)) {
					uni.showToast({
						title: '请填写正确手机号',
						icon: "none"
					});
					return
				}
				this.getCodeText = "发送中" //点击“发送验证码”后显示——“发送中”
				this.getCodeisWaiting = true;//显示等待
				this.getCodeColor = "#02D5EA"//“发送中”颜色
				this.sendCode()//调用sendCode
			},

2.2

			//发送验证码
			sendCode() {
				this.$http({
					url: '/api.user/register?act=get_sms_code',
					method: 'POST',
					data: {
						mobile: this.step1Params.mobile
					}
				}).then(res => {
					this.smsInfo = res.data
					uni.showToast({
						title: '验证码已发送',
						icon: "none"
					})

					this.setTimer()
				})
			}

2.3

	setTimer() {
			let holdTime = 60;
			this.getCodeText = "重新获取(60)"

			this.Timer = setInterval(() => {
				if (holdTime <= 0) {
					this.getCodeisWaiting = false;
					this.getCodeColor = "#ccc";
					clearInterval(this.Timer);
					this.Timer = null
					return
				}
				this.getCodeText = "重新获取(" + holdTime + ")"
				holdTime--;
			}, 1000)
		},

3、（点注册）判断验证码是否正确

	inforChange() {
				console.log(this.$tools);
				this.$tools.checkForm(this.step1Params, this.step1Rules).then(() => {
					if (this.step1Params.password !== this.step1Params.password2) {
						uni.showToast({
							title: '两次输入密码不一致',
							icon: 'none'
						})
						// return
					} else if (this.step1Params.sms_code !== this.smsInfo.sms_code) {
						uni.showToast({
							title: '验证码不正确',
							icon: 'none'
						})
					}
					return
					this.isReg = !this.isReg;
				})
			},

checkForm是校验表单的一个方法，放在一个目录下面


export default {
	checkForm(form, rules) {
		return new Promise((resolve, reject) => {
			for (let key in rules) {
				if (!form[key]) {
					uni.showToast({
						title: rules[key],
						icon: 'none'
					})
					reject(rules[key])
					break
				}
			}
			
			resolve()
		})
	}
}