存档

文章标签 ‘图片验证码’

图片验证码confirmCode类使用说明

2020年12月9日 评论已被关闭

我们需要如下:demo.html+ajax/doConfirmCode.php+demoSave.php+confirmCode.php(php类,不提供)+confirmCode.js(js类,不提供)

我们先看看demo.html的代码

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>验证码Demo</title>
	<style>
	* {box-sizing:border-box;}
	#code{border:#ababab solid 1px;width:100px;height:30px;line-height:30px;vertical-align:middle;border-radius:6px;}
	#img{border:1px solid red;cursor:pointer;vertical-align:middle;border-radius:6px;width:100px; height:30px; display: inline-block;}
	#button{cursor:pointer;vertical-align:middle;width:100px;height:30px;line-height:30px;background:#000;color:#fff;display:inline-block;text-align:center;border-radius:6px;border:none;margin-left:30px;}
	#box{width:90%;margin:0 auto;margin-top:100px;}
	</style>
</head>
	
<body>
	<div id="box">
		<input type="text" id="code" value="" />
		<img id="img" />
		<input id="button" type="button" value="保存提交" />
	</div>

	<script type="text/ecmascript" src="static/jquery-1.12.4.min.js"></script>
	<script type="text/ecmascript" src="static/confirmCode.js"></script>
	<script type="text/ecmascript">
		$(function(){
			var yzm = new confirmCode({
				//基本配置
				input:'#code',//必填,验证码输入框id或css选择器,比如: '#code'或者'.input_captcha'
				input_maxlength:4,//可以不填,验证码长度, 默认是4(js会自动将控件的maxlength改为input_maxlength,并且input_onblur_check的参数也会先判断长度然后来处理)
				input_first_auto_focus:false,//可以不填,验证码输入框第一次加载是否自动获取焦点并清空值,默认false
				img:'#img',//必填,显示验证码的容器id或css选择器,比如: '#imgcode'或者'.img_captcha'
				img_loading:{
					first_unautoload_default_img:'',//可以不填,填写了代表验证码第一次默认不自动加载所设置的默认图片,可以用远程地址:https://static.vancdn.com/public/img/yzm/click2load.png
					first_load_delay:2000,//第一次延迟加载的毫秒,默认0(如果first_unautoload_default_img设置为非空,则无效)
					loading_img:'static/loading.png',//可以不填,加载验证码过程中的默认图片,可以用远程地址:https://static.vancdn.com/public/img/yzm/loading.png
					loading_fail_img:'static/error.png',//可以不填,加载验证码失败的图片,可以用远程地址:https://static.vancdn.com/public/img/yzm/error.png
					loading_fail_func:function(msg){//验证加载失败的回调函数,如果不操作请申明空function
						alert('验证码加载失败:'+msg+';在此进行相关书写');
					}
				},
				get_url:'ajax/doConfirmCode.php',//必填,获取验证码的url
				
				//第一种情况:在提交保存数据的js代码中验证验证码的合法性(验证长度之后,是否进行js的md5验证)
				//第二种情况:如果开启了input_onblur.open,则先走js的md5验证再走input_onblur.server_check_url(如果设置了的话)
				verify_by_js_md5:true,//可以不填,默认false
				
				//input控件onblur的监控处理
				input_onblur:{
					open:true,//是否在input的onblur时交互检查,总开关(当设置为true的时候,如果verify_by_js_md5==true,那么先走js的md5验证,再走服务端验证)
					server_check_url:'ajax/doConfirmCode.php',//启用服务器端验证时请求的url(如果没设置,则不走服务端验证)
					success:function(){//验证成功的回调函数,如果不操作请申明空function
						alert('onblur验证成功;在此进行相关书写');
					},
					fail:function(msg){//验证失败的回调函数,如果不操作请申明空function
						alert('onblur验证失败:'+msg+';在此进行相关书写');
					}
				},
				
				console_test:true,//是否调试console日志,默认false
			});
			
			//适合保存的时候检查验证码是否有效,根据yzm.verify_save()返回值进行相关操作
			$("#button").on('click',function(){
				//这里仅仅只做验证码的逻辑处理,自己其他业务自己处理
				if(yzm.verify_save()==true){
					
					//在这里获取到输入框的值和key
					var yzmValue=yzm.getYzm();
					alert("yzmkey:"+yzmValue.yzmkey+",yzmvalue:"+yzmValue.yzmkey);
					
					alert('验证码验证成功,书写自己需要的代码,比如请求ajax...');
				}
				else {
					alert('验证码验证失败,书写自己需要的代码,比如return false');
				}
			});
		});
	</script>
</body>
</html>

再看看ajax/doConfirmCode.php

<?php
header('content-type:text/plain; charset=utf-8');
//本代码基本可以不用重写,除非遇到参数不一致
switch($_POST['action']){
	case 'get':
		echo json_encode(Myzm()->get(
			array(
				'width'=>100,//图片宽度px,默认100
				'height'=>30,//图片高度px,默认30
				'textNum'=>4,//验证码(字母+数字)数量,默认4
				'timeout'=>600,//验证码有效期秒,默认600
			)
		));
	break;
	case 'onblurcheck':
		echo json_encode(Myzm()->check(
			array(
				'yzmcode'=>$_POST['yzmcode'],//用户输入的code
				'yzmkey'=>$_POST['yzmkey'],//验证码的key
				'textNum'=>4,//验证码长度,默认为4
				'delyzmkey'=>false,//是否删除key,默认为true,特别注意:ajax执行check时不删除key, 待form提交后再删除
			)
		));
	break;
	default:break;
}

在看看demoSave.php

<?php
header('content-type:text/plain; charset=utf-8');
/***示例检查验证码的代码-开始***/
$yzmCheck=Myzm()->check(
	array(
		'yzmcode'=>$_POST['yzmcode'],//用户输入的code
		'yzmkey'=>$_POST['yzmkey'],//验证码的key
		'textNum'=>4,//验证码长度,默认为4
		'delyzmkey'=>true,//是否删除key,默认为true,特别注意:ajax执行check时不删除key, 待form提交后再删除
	)
);
if($yzmCheck['status']=='error'){
	echo $yzmCheck['errorStr'];//通过$yzmCheck['errorStr']进行自己的相关操作
}
/***示例检查验证码的代码-结束***/
css.php