thinkPHP3.2.3利用Ajax前台实现验证码验证,但通过form表单的按钮提交...
发布网友
发布时间：2022-04-30 13:04
共3个回答
热心网友
时间：2022-04-18 12:04
1：验证码生成代码：
//输入验证码
function verifyimg(){
//验证码做配置
$config =array(
'seKey' => 'ThinkPHP.CN', // 验证码加密密钥
'codeSet' => '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY', // 验证码字符集合
'expire' => 1800, // 验证码过期时间（s）
'useZh' => false,
'useImgBg' => false, // 使用背景图片
'fontSize' => 14, // 验证码字体大小(px)
'useCurve' => true, // 是否画混淆曲线
'useNoise' => true, // 是否添加杂点
'imageH' => 45, // 验证码图片高度
'imageW' => 100, // 验证码图片宽度
'length' => 4, // 验证码位数
'fontttf' => '4.ttf', // 验证码字体，不设置随机获取
'bg' => array(243, 251, 254), // 背景颜色
'reset' => true, // 验证成功后是否重置
);
$verify=new Verify($config); //实例化Verify类。 空间类元素引入。使用次数多的情况下。
//verify= new \Think\Verify 完全限定名称方式。 使用次数少的情况下。
$verify->entry(); //数据验证码。
}
2.下面的是一段验证码显示代码：
<ul>
<li class="user_main_text">验证码： </li>
<li class="user_main_input">
<input class="TxtValidateCodeCssClass" id="captcha" name="captcha" type="text">
验证码输出
<img src="{$smarty.const.__CONTROLLER__}/verifyimg" onclick="this.src='{$smarty.const.__CONTROLLER__}/verifyimg/'+Math.random()" alt="" />
</li>
</ul>
希望对你有帮助。追问
我通过更改verify类实现了验证码验证一次后不失效，从而可以正常登录了，但是这样验证码的意义就不存在了：
有什么好的解决办法？不知道form加上action指向后和ajax一起使用有什么后果！
热心网友
时间：2022-04-18 13:22
我用的方法是判断$_session里的验证码值是否与post提交的验证码值是否相等，经过测试没有问题，代码如下：
前台表单：
<form class="login-form" action="<%$smarty.const.__MODULE__%>/Login/index/" method="post" name="login"><h3 class="form-title">登陆</h3>
<div class="mesgBox alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
<span> 请输入用户名和密码 </span>
</div>
<div class="form-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<label class="control-label visible-ie8 visible-ie9">用户名</label>
<input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="用户名(不区分大小写)" name="username"/>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">密码</label>
<input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="密码" name="password"/>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">验证码</label>
<input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="验证码(不区分大小写)" name="code" style="width:52%;display:inline-block">
<img id="check" src="<%$smarty.const.__CONTROLLER__%>/verifyShow" onclick="this.src='<%$smarty.const.__CONTROLLER__%>/verifyShow/'+Math.random();"/><a href="javascript:change();">换一张</a>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success uppercase btn-block">登陆</button>
</div>
</form>
js效果
//登录表单验证var check = {
username: false, //用户名
password: false, //密码
code: false //验证码
}
//提示信息
var mesg = '';
$(function () {
var login = $('form[name=login]');
// 登录提交事件
login.submit(function () {
var isOk = check.username && check.password && check.code;
if(isOk){
return true;
}
//点击提交依次触发失去焦点再次验证
$('input[name=username]',login).trigger('blur');
$('input[name=password]',login).trigger('blur');
$('input[name=code]',login).trigger('blur');
return false;
});
//验证码验证码
$('input[name=code]',login).blur(function () {
var code = $(this).val();
var mesgBox = $(".mesgBox span");
//不能为空
if (code == '') {
mesg = '验证码不能为空';
mesgBox.html(mesg);
mesgBox.parent().removeClass('display-hide');
check.code = false;
return;
}
//异步验证验证码
$.post(PATH + '/ajax_code/',{code:code},function (status) {
if(status){
mesg = '';
mesgBox.html(mesg);
mesgBox.parent().addClass('display-hide');
check.code = true;
}else{
mesg = '验证码不正确';
mesgBox.html(mesg);
mesgBox.parent().removeClass('display-hide');
check.code = false;
}
},'json');
});
})
后台控制器：
namespace Admin\Controller;use Think\Controller;
use Think\Verify;
class LoginController extends Controller {
private $verify;
//验证码
public function verifyShow(){
//验证码设置
$config = array(
'useImgBg' => false, // 使用背景图片
'fontSize' => 16, // 验证码字体大小(px)
'useCurve' => true, // 是否画混淆曲线
'useNoise' => false, // 是否添加杂点
'imageH' => 45, // 验证码图片高度
'imageW' => 110, // 验证码图片宽度
'length' => 4, // 验证码位数
'fontttf' => '', // 验证码字体，不设置随机获取
'bg' => array(243, 251, 254), // 背景颜色
'reset' => true, // 验证成功后是否重置
);
$verify = new Verify($config);
//验证码输出
$verify->entry();
}
public function _initialize(){
$this->verify = new Verify();
}
//后台管理员登录页
public function index(){
if(IS_POST && !empty($_POST)) {
//一、判断验证码是否正确
foreach($_SESSION as $key => $value){
$code = $value['verify_code']; //session里的验证码值
}
if($this->verify->check($_POST['code']) == $code) { //post提交过来的验证码值 与 session里的验证码值判断
//二、用户民与密码验证
//验证用户名
$userData = new \Model\LoginModel();
//在LoginModel里创建一个checkLogin方法，用于验证用户名与密码
//验证成功，把当前管理员的一条记录信息都返回
//验证失败，返回NULL
$info = $userData->checkLogin($_POST['username'], $_POST['password']);
if($info) {
//session持久化用户信息(id/name)，跳转到后台首页
session('admin_id', $info['lid']);
session('admin_name',$info['username']);
$this->redirect('Index/index', '', 1, '正在登陆...');
} else {
$this->redirect('index', '', 1, '用户名或密码错误');
}
} else {
$this->redirect('index', '', 1, '验证码错误');
}
}
$this-> display();
}
//异步验证验证码
public function ajax_code(){
if(!IS_AJAX) $this->redirect('index', '', 1, '页面不存在');
if($this->verify->check(I('post.code'))){
echo 1;
}else{
echo 0;
}
}
}
希望对你有帮助
热心网友
时间：2022-04-18 14:57
