uni-app实现手机发送验证码的效果,以及实现过程中会遇到的一些基本的逻辑如何进行判断处理

效果预览:

处理一些可能出现的逻辑:

逻辑1:用户输入手机号必须满足11位数,如不满足,或输入了其他特殊字符,这些通通都要排除掉,并且在页面打印提醒的红字信息。并且用户在此期间,不能发送验证码。


逻辑2:如果用户重新输入了完整的11位数手机号码,那么红字就要自动取消掉,不能一直出现在页面上了。

逻辑3:用户习惯,有的用户输完手机号后,喜欢敲回车,有的喜欢点按钮,无论用户选择哪一种方式,你都必须发送验证码。

逻辑4:按钮点击之后,必须为disabled禁用状态,防止用户频繁多次触发点击。同时按钮里面的内容会发生变化,不在是静态的“发送”2个字,而是显示验证码的倒计时信息。

逻辑5:按钮点击之前和之后的颜色实现,点击之前为蓝色,点击之后为禁用的白色按钮,倒计时结束后,又要恢复原始按钮的状态(也就是倒计时也要消失,文本恢复成“发送”二字)。

逻辑6:倒计时里面秒数的实现依靠的是定时器,什么时候应该停止定时器的进程(清除计时器)?并且复原按钮初始状态,这时候验证码也要恢复到原来的时间点。

涉及一些uni-app组件的知识:
数据绑定
双向数据绑定
方法类型
uni-app组件本身提供的属性

完整代码如下:







你可能感兴趣的:(uni-app实现手机发送验证码的效果,以及实现过程中会遇到的一些基本的逻辑如何进行判断处理)