thinkphp验证码的实现(form、ajax实现验证)
两种验证码验证实现,一种直接在form表单提交按钮实现验证,一种使用ajax传递参数实现验证:
1、直接在form表单提交按钮实现验证,在控制器VerifyController.class.php中写入如下代码:
namespace Home\Controller; use Think\Controller; class VerifyController extends Controller { public function index() { $this->display(); } public function checkLogin() { $verify=new \Think\Verify(); $code=I('post.verify');//表单验证码 if($verify->check($code)){ $this->success('验证码正确'); }else{ $this->error('验证码错误'); } } public function verify() { // 实例化Verify对象 $verify = new \Think\Verify(); // 配置验证码参数 $verify->fontSize = 14; // 验证码字体大小 $verify->length = 4; // 验证码位数 $verify->imageH = 34; // 验证码高度 $verify->useImgBg = true; // 开启验证码背景 $verify->useNoise = false; // 关闭验证码干扰杂点 $verify->entry(); } }
在视图Verify/index.html中的代码如下:
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <form action="{:U('verify/checkLogin')}" method="post"> <div class="form-group has-feedback"> <input type="text" name="verify" id="verify" placeholder="验证码" style="width:100px;" /> <span style="right:120px;"></span> <img class="verify" src="{:U(verify)}" alt="验证码" onClick="this.src=this.src+'?'+Math.random()" /> </div> <div class="col-xs-4"> <button type="submit" >验证</button> </div> </form> </body> </html>
2、使用ajax传递参数实现验证,在控制器VerifyController.class.php中的代码如下:
namespace Home\Controller; use Think\Controller; class VerifyController extends Controller { public function index() { $this->display(); } public function checkLogin() { $verify=new \Think\Verify(); $code=$_POST['code'];//ajax验证码获取 if($verify->check($code)){ $this->ajaxReturn(1); }else{ $this->ajaxReturn(0); } } public function verify() { // 实例化Verify对象 $verify = new \Think\Verify(); // 配置验证码参数 $verify->fontSize = 14; // 验证码字体大小 $verify->length = 4; // 验证码位数 $verify->imageH = 34; // 验证码高度 $verify->useImgBg = true; // 开启验证码背景 $verify->useNoise = false; // 关闭验证码干扰杂点 $verify->entry(); } }
视图Verify/index.html中的代码如下:
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="__JS__/jquery-2.1.0.min.js" ></script> </head> <body> <form action="{:U('verify/checkLogin')}" method="post"> <div class="form-group has-feedback"> <input type="text" name="verify" id="verify" placeholder="验证码" style="width:100px;" /> <span style="right:120px;"></span> <img class="verify" src="{:U(verify)}" alt="验证码" onClick="this.src=this.src+'?'+Math.random()" /> </div> <div class="col-xs-4"> <button type="button" id="ver">验证</button> </div> </form> <script> $(document).ready(function(){ /*ajax验证码*/ $("#ver").click(function(){ var code=$("#verify").val();//获取输入验证码 var url=$('form').attr('action');//获取表单action的值 $.ajax({ type:"post", url:url, data:{"code":code}, error:function(request){ alert("ajax错误"); }, success:function(data){ if(data){ alert("正确") }else{ alert('错误') } } }); }); }); </script> </body> </html>
在第2种方法,不要忘记下载jquery.min.js文件下载地址:http://www.jq22.com/jquery-info122
在配置文件Common/conf/config.php中配置地址:
return array( /*地址替换*/ 'TMPL_PARSE_STRING'=>array( '__JS__'=>__ROOT__.'/Public/JS', ), );
相关推荐
wcqwcq 2020-07-04
TONIYH 2020-06-11
kentrl 2020-11-10
结束数据方法的参数,该如何定义?-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。<input id="add" type="button" value="新增visitor&quo
ajaxyan 2020-11-09
zndy0 2020-11-03
学留痕 2020-09-20
Richardxx 2020-11-09
learningever 2020-09-19
chongxiaocheng 2020-08-16
ajaxhe 2020-08-16
lyqdanang 2020-08-16
curiousL 2020-08-03
TONIYH 2020-07-22
时光如瑾雨微凉 2020-07-19
83510998 2020-07-18
坚持着执着 2020-07-16
jiaguoquan00 2020-07-07