使用layer.prompt实现图片验证码输入的效果-优快云博客

本文链接：https://blog.youkuaiyun.com/jun_bai/article/details/128033205

本文介绍了如何在懒得添加新页面的情况下，利用layer库快速创建一个显示、输入和验证验证码的功能。通过layer.prompt结合动态刷新验证码图片，实现了用户输入四位数字验证码并进行初步验证的过程。

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

在进行一些操作前，需要输入验证码再进行下一步，通常需要做一个验证码显示和输入验证页面，今天懒得添加页面，直接用layer.prompt实现了显示验证码，输入验证码，和简单验证，然后发送到后台进一步验证。

           var rmg = "rand.gif?" + new Date().getTime();
		   layer.prompt({
               title: '<img src="'+rmg+'"  id="verifyImg" width="100%" height="50">',
			   formType: 0,
	           move:false,
	           value: '', //初始时的值，默认空字符
	           minlength: 4,
	           maxlength: 4, //可输入文本的最大长度，默认500
	           success: function(layero, index){
	               layero.find('input').attr('placeholder',"请输入上图中的数字");
	               $('.layui-layer-title img').css('cursor','crosshair');
	               $('.layui-layer-setwin').css('display','none');
	               $('.layui-layer-title').css('padding','0px');	               
	               layero.on('click','#verifyImg',function(){
	                   let url=$(this).attr('src');
	                   $(this).attr('src',url+"/"+(new Date()).valueOf());	
	               });
	           }
	       }, function(value, index, elem){
	           let code=value;
	           if(code.length != 4){
	               layer.msg('字数不正确', {icon:5, time: 2000, anim: 6});
	               return false;
	           }else{
	               //sendsms(uuu , code); //验证通过，进行下一步发送短信验证
	               layer.close(index);
	           }
	       });