php ajax 验证实例,PHP图形验证码生成代码与包括Ajax验证实例应用(1/2)_PHP教程

验证码ajax验证

*{ font-size:12px;}

a{ text-decoration:none;}

a:hover{ text-decoration:underline; color:red;}

$(document).ready(function(){

/*—————-看不清楚,换张图片———–*/

$(“#chang_authcode_btn”).click(function(){

var authcode_url = “authcode.php?t=”+math.random(0,1);

$(“#authcode_img”).attr(‘src’,authcode_url);

});

/*—————-检测验证码———–*/

$(“#authcode”).bind({

‘focusin’:function(){

/**

*得到焦点

*我将img图片移除,若只改变src为’

*’的话,在ie下会呈现出一个无图片的小图片,

*所以我这里选择直接把img元素移除

*/

$(this).next(‘label’).children(‘img’).remove();

$(this).next(‘label’).children(‘span’).text(”);

},

‘focusout’:function(){

/**

*失去焦点

*这里要做的事情主要有下列几个:

*(1)先用网页特效验证用户输入的验证是不是4位合法的字符,正则匹配

*(2)如果正则匹配失败(不是合法的4位字符),在更新次验证码图片(也就是再触发一次”看不清楚”的a标签的点击事件)

*/

var input_authcode = $(this).val();

var authcode_regex = new regexp(‘^[a-z0-9]{4}’,’i’);

if(!authcode_regex.test(input_authcode)){//不是合法的4位字符串,显示错误信息给用户

$(this).next(‘label’).prepend(“

“);//加上错误图标

$(this).next(‘label’).children(‘span’).text(‘输入的验证码格式错误!’);//加上错误提示信息

$(“#chang_authcode_btn”).trigger(‘click’);//再次刷新图片

}else{//ajax服务器验证,就是把用户的输入的验证码提交到服务器上的某个验证页面来处理!

$.get(‘dealauthcode.php’,{authcode:input_authcode},function(check_result){

if(check_result==’mis_match’){//服务器验证没通过

$(“#authcode”).next(‘label’).prepend(“

“);//加上错误图标

$(“#authcode”).next(‘label’).children(‘span’).text(‘验证码输入错误!’);//加上错误提示信息

$(“#chang_authcode_btn”).trigger(‘click’);//再次刷新图片

}else{//服务器验证通过了

$(“#authcode”).next(‘label’).prepend(“

“);//加上正确图标

$(“#authcode”).next(‘label’).children(‘span’).text(‘验证码输入正确!’);//加上正确提示信息

}

});

}

}

});

});

验证码: