uniapp 手机验证码输入框(随机数、倒计时、隐藏手机号码中间四位)可以直接使用

这篇具有很好参考价值的文章主要介绍了uniapp 手机验证码输入框(随机数、倒计时、隐藏手机号码中间四位)可以直接使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uniapp密码输入框,uniapp,javascript,前端,vue.js,小程序,uni-app

 

uniapp密码输入框,uniapp,javascript,前端,vue.js,小程序,uni-app

uniapp密码输入框,uniapp,javascript,前端,vue.js,小程序,uni-app  uniapp密码输入框,uniapp,javascript,前端,vue.js,小程序,uni-app

uniapp密码输入框,uniapp,javascript,前端,vue.js,小程序,uni-app 

 

如键盘被隐藏,可直接点击蓝框弹出键盘,蓝框就相当于input的光标,验证码输入错误之后会将字体以及边框改为红色,持续1.5s(可自行修改时间),然后清空数据。

<template>
	<view class="code">
		<view class="code-tip-one">请输入验证码
			<view class="code-tip">已向<text>+86 {{phone.substring(0, 3)}}****{{phone.substr(phone.length-4)}}</text>发送验证码</view>
			<view class="code-errow" v-if="codeclolor == '#ff0000'">验证码输入错误</view>
		</view>
		<input class="cinput" adjust-position="false" auto-blur="true" @blur="blur" @input="codenum" :focus="focus"
					value="code" v-model="code" type="number" maxlength="6" />
		<view class="code-input">
			<view v-for="(item,index) in 6" :key="index" @click="codefocus(index)"
						:style='(index == code.length? "border: 5rpx solid #1195db;width: 80rpx;height: 80rpx;line-height: 80rpx;":"color: " + codeclolor + ";" +"border: 2rpx solid" + codeclolor)'>
						{{code[index] && code[index] || ''}}
			</view>
		</view>
		<block v-if="sec!=20">
			<view class="recode">重新发送({{sec}}s)</view>
		</block>
		
		<button @click="getCode()" type="primary" :disabled="verifyShow" style="margin-top: 200rpx;">发送短信</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone:'12345678910',
				// 验证码输入聚焦
				focus: true,//input焦点,用于键盘隐藏后重新唤起
				// 验证码框颜色
				codeclolor: "#313131",//自定义光标的颜色
				// 验证码获取秒数
				sec: '20',//这是重新获取验证码的倒计时(可根据需求修改)
				code: '',//这是用户输入的验证码
				codeCorrect:'',//正确的验证码
				verifyShow:false,//是否禁用按钮
			}
		},
		methods: {
			// 输入验证码
			codenum: function(event) {
				// console.log('输入的值',event.target.value)
				var that = this
				var code = event.target.value
				that.code = code
				if (code.length == 6) {
					if (code == that.codeCorrect) {
		                //输入六位验证码后自动进行验证并执行验证成功的函数
						console.log('验证码正确:',that.code)
					} else {
						console.log('验证码错误!!!:',that.code)
						that.codeclolor = "#ff0000"
						setTimeout(function() {
							that.code = []
							event.target.value = ""
							that.codeclolor = "#313131"
						}, 1500)
					}
				}
			},
			// 键盘隐藏后设置失去焦点
			blur: function() {
				var that = this
				that.focus = false
			},
			// 点击自定义光标显示键盘
			codefocus: function(e) {
				var that = this
				if (e == that.code.length) {
					that.focus = true
				}
			},
			getCode(){//获取验证码
				const that = this
				that.codeCorrect = that.getVerificationCode(6)  //可以不传值,默认为4位随机码
				console.log('生成的随机码为:' + that.codeCorrect)
				that.timedown(that.sec)// 倒计时
			},
			//随机生成几位数
			getVerificationCode(codeLength){ //传入需要的字符串长度,不传默认为4
				// 准备一个用来抽取码的字符串,或者字典
				// let verification_code_str = "abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";  //数字和字母
				let verification_code_str = "0123456789";     //纯数字
				// 获取某个范围的随机整数,封装的函数,在上面抽取字典的时候进行了调用
				function getRandom(min, max) {//意思是获取min-max数字之间的某个随机数,直接调用即可
					return Math.round(Math.random() * (max - min) + min);
				}
				let newStr = '';                    //创建一个空字符串,用来拼接四位随机码
				for (var i = 0; i < codeLength; i++) {       //for循环四次,则拼接四次随机码
					newStr += verification_code_str[getRandom(0, verification_code_str.length - 1)];   //从字典中随机选一个下标,并拼接到空字符串中
				}
				return newStr
			},
			//倒计时
			timedown:function(num){
				let that = this;
				if(num == 0){
					that.verifyShow = false;		 // 不禁用获取验证码按钮
					that.sec = 20	
					return clearTimeout();
				}else{
					that.verifyShow = true;			// 禁用获取验证码按钮
					setTimeout(function() {  
						that.sec = num-1
						that.timedown(num-1);  
					}, 1000);//定时每秒减一  
				}
			},
		}
	}
</script>

<style scoped lang="less">
	    .code {
			margin: auto;
			margin-top: 50rpx;
			width: 650rpx;
			height: auto;
		}
	 
	    .code-tip-one {
			width: 650rpx;
			height: 250rpx;
			line-height: 100rpx;
			font-size: 60rpx;
			font-weight: bold;
			color: #313131;
		}
	 
		.code-tip {
			width: 650rpx;
			height: 100rpx;
			line-height: 50rpx;
			font-size: 30rpx;
			font-weight: normal;
			color: #8a8a8a;
		}
	 
		.code-errow {
			width: 650rpx;
			height: 50rpx;
			line-height: 25rpx;
			font-size: 28rpx;
			font-weight: normal;
			color: #ff0000;
		}
	 
		.code-tip>text {
			padding: 0 20rpx;
			width: 650rpx;
			font-size: 30rpx;
			font-weight: normal;
			color: #ff5500;
		}
	 
	    .code-input {
			margin: auto;
			width: 650rpx;
			height: 100rpx;
			display: flex;
		}
	 
		.code-input>view {
			margin-top: 5rpx;
			margin-left: 15rpx;
			width: 86rpx;
			height: 86rpx;
			line-height: 86rpx;
			font-size: 60rpx;
			font-weight: bold;
			color: #313131;
			text-align: center;
			border-radius: 10rpx;
		}
	 
		.code-input>view:nth-child(1) {
			margin-left: 0rpx;
		}
	 
		.cinput {
			position: fixed;
			left: -100rpx;
			width: 50rpx;
			height: 50rpx;
		}
		
		.recode{
			margin-top: 20rpx;
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: #707070;
			font-size: 28rpx;
		}
</style>

实现思路:创建六个正方形的view(使用for循环),然后创建一个数字input,最大输入长度为六位(根据验证码的长度),再将input隐藏掉,获取到的值分别放到六个view中。

其中验证码验证失败之后利用v-model双向绑定进行清空已经输入的值

注意:单纯的输出 code[index] 不会展示空只会展示未定义,必须加上 {{code[index] && code[index] || ''}} 进行判断替换为空,密码输入框替换字符,也就是与或非的意思吧

如果是不想展示验证码信息可以改为{{code[index] && '●' || ''}},这样你输入是参数就会被替换为●●●●●●文章来源地址https://www.toymoban.com/news/detail-579974.html

到了这里,关于uniapp 手机验证码输入框(随机数、倒计时、隐藏手机号码中间四位)可以直接使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • java生成随机数

       bound 必须是正数。 以下代码生成的是 0 到 30 的随机数。 生成区间的随机数:[最小值,最大值] 学的不是技术,更是梦想!!!

    2024年02月07日
    浏览(66)
  • Flutter 生成随机数

    如何让随机数变化? 我们尝试过的都知道,当你创建出来一个随机数后,调用他他的值是随机的,但是,这时候他的值就会固定住,不管怎么样都是随机出来的那个数,如果想要他每次都不一样的话,我们就想要使用刷新来让他变化了。 我们可以使用这样的方法来使他每次不一

    2024年02月13日
    浏览(47)
  • haiku生成随机数

    Haiku 遵循 JAX 的设计,生成的随机数是两个元素组成的列表。其中第一个元素是用于生成伪随机数的状态,第二个元素是用于分发密钥的子键。两个元素分别用于状态和子键,确保在分布式计算或并行计算中,多个随机数生成器的状态可以在一定程度上相互影响,从而提高随

    2024年01月20日
    浏览(64)
  • 生成随机数

    用于产生随机数 boolean nextBoolean() : 返回下一个伪随机数,它是取自此随机数生成器序列的均匀分布的 boolean 值。 void nextBytes(byte[] bytes) : 生成随机字节并将其置于用户提供的 byte 数组中。 double nextDouble() : 返回下一个伪随机数,它是取自此随机数生成器序列的、在 0.0 和 1.0 之

    2024年02月03日
    浏览(55)
  • c++随机数

    计算机的运行是通过代码来进行的,而代码的执行需要确定的数字,即计算机的运行过程是一个确定的过程,计算机的运行过程是一个确定的过程,所以不可能产生一个真正有意义的数字,即计算机只能产生 伪随机数 。 引用随机数需要引用头文件 1.随机数函数 (1) c++提供产

    2024年02月11日
    浏览(36)
  • Qt之随机数

            介绍使用qsrand和qrand生成随机数。         生成随机数主要用到了函数qsrand和qrand,qsrand用来设置种子点,该种子为qrand生成随机数的起始值。如果不调用qsrand,那么qrand()就会自动调用qsrand(1),即系统默认将1作为随机数的起始值。使用相同的种子生成的随机数一样

    2024年02月09日
    浏览(35)
  • Qt产生随机数

    提问: 有没有小伙伴遇到这么一种情况,使用rand()和qrand()函数生成的随机数好像不是那么随机,每次都一样。那这种就叫做“伪随机”,因为没有种随机数种子,所以系统默认随机数种子是固定值。 在Qt项目中呢,生成随机数有两个步骤: 1.使用qsrand()种随机数种子 2.调用

    2024年02月11日
    浏览(43)
  • 真伪随机数

    随机数生成的方式一般有两种,分别为: 硬件生成随机数Hardware RNG,原理是用某个仪器一直探测环境中的物理量(比如说,时钟,IO 请求的响应时间,特定硬件中断的时间间隔,键盘敲击速度,鼠标位置变化,甚至周围的电磁波等等……直观地讲,你每按一次键盘,动一下鼠

    2024年02月10日
    浏览(37)
  • 一文详解安全随机数

    本文分享自华为云社区《【安全攻防】深入浅出实战系列专题-安全随机数》,作者: MDKing 。 使用随机数可分类安全场景跟非安全场景。非安全场景需要生成的越快越好。安全场景使用的随机数必须足够安全,保证不能被预测到。 常见的非安全场景: 数据的索引号、标识;

    2024年02月05日
    浏览(46)
  • Python 获取随机数

    作用:随机生成一个[0,1)之间的浮点数 作用:随机生成[a, b]范围内一个整数 作用:随机生成[a, b]范围内一个整数,如果指定step,step作为步长会进一步限制[a,b]的范围,比如randrange(10, 20, 2)表示生成[10, 20)范围内的随机偶数 作用:产生[a, b]范围内一个随机浮点数 作用:从数组

    2024年02月14日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包