第一章 找回密码
jquery 找回密码思路---通过输入手机号,发送短信验证码 :
①首先 js判断用户电话是否为空、
②判断data('locked')是否是true(如果是则返回false)
③设置data('locked',true)
④手机号发送到后台 (1)首先获取到关于手机发送验证码的所有session的信息、判断是否为空,或者是否是标准的手机号 (2)判断是否绑定了、(3)判断是否在时间控制范围内 (4)发送短信 (如果成功了,把用户电话、验证码、时间存入session中(用于前面的时间判断) 之后返回ok 否则返回错误的相关信息)
⑤前台js判断返回的是否是ok 如果是ok 修改提示消息,同时给一个time值(用于给用户提示时间),之后循环(用于限制用户不能频繁的点击获取验证码)循环的时候判断是否是time是否是<=0的 如果是data('locked',false);修改显示倒计时的地方、清除循环clearInterval(); 如果没有<=0 给一个倒计时显示 time--; 这样还有一个bug就是 如果用户刷新了,又可以发送短信了 所以后台要控制好(session中时间的设置和判断)。
⑥当用户手机获取到验证码 之后输入验证码(输入次数限制)后台限制
具体代码如下:
js:
<script type="text/javascript">
$(function() {
$("#getCaptcha").live("click", function() {
var _this = $(this);
var span = $("span#info em");
var tel = $.trim($("input[name='tel']").val());
if (tel == '') {
span.removeClass().addClass('Error').text('请输入手机号');
return false;
}
if (span.data('locked')) return false;
span.data('locked', true);
$.post(U('home/Repwd/getVrifi'), {phone : tel}, function(data) {
if (data == 'ok') {
var time = 120;
span.removeClass().addClass('success').text('短信验证码已发送至您的手机,请输入后继续');
var _codesetInterval = setInterval(function() {
if (time <= 0) {
_this.val('获取验证码');
span.data('locked', false);
clearInterval(_codesetInterval);
} else {
_this.val('重新获取(' + time + ')');
time--;
}
}, 1000);
} else {
span.removeClass().addClass('Error').text(data).data('locked', false);
}
});
});
//下一步
$("#pre").live("click", function() {
var code = $.trim($("input[name='code']").val());
var phone = $.trim($("input[name='tel']").val());
var span = $("#vrifi em");
var url = U('home/Repwd/reset');
// alert(url);return false;
if (code == '') {
span.removeClass().addClass("Error").text('验证码不能为空');
return false;
}
$.post(U('home/Repwd/checkCode'), {
code : code,
phone : phone
}, function(data) {
if (data == 'ok') {
//页面跳转
window.location.href = url + "&phone=" + phone;
} else {
//提示错误
span.removeClass().addClass('Error').text(data);
}
})
});
});
</script>
php:
/**
* 忘记密码 手机获取验证码
*/
public function getVrifi(){
$time = time();
$phoneCode = session('phone_code'); //保存在session中的验证码
$phone = $_POST['phone'];
empty($phone) ? exit('密码不能为空') : $phone;
if(!preg_match('/^1[3458]\d{9}$/', $phone)){
exit('请输入正确的手机号码');
}
if($phoneCode[$phone]['send_time'] > $time) exit('请勿频繁获取手机验证码');
//根据用户电话查询用户信息
$user = model('User')->where(array('phone'=>$phone))->find();
if(is_null($user) || empty($user)) exit('手机未绑定');
$phoneCode[$phone]['send_time'] = $time + 120;
$code = rand(100000,999999);//手机验证码
$phoneCode[$phone]['code'] = md5($code);
$txt = '您本次获取的验证码是'.$code.'请在页面指定处填写。如非本人操作,请忽略此信息';
if(sendSms($phone,$txt)){
session('phone_code',$phoneCode); //相关信息保存session 时间的控制
exit('ok');
}else{
exit('发送失败');
}
}
/**
* 检查验证码是否正确
*
*/
public function checkCode(){
$phone = $_POST['phone'];
$code = md5($_POST['code']);
$phone = empty($phone) ? exit('手机号不能为空') : $phone;
$phoneCodes = session('phone_code');
//常规检查用户信息
if(!empty($phone)){
if(!preg_match('/^1[3458]\d{9}$/', $phone)){
exit('异常操作');
}
}
//检查用户信息
if(!isset($phoneCodes[$phone]) || empty($phoneCodes[$phone])){
exit('请先获取验证码');
}
$phoneCode = $phoneCodes[$phone];
if($code !== $phoneCode['code']){
$phoneCode['err'] += 1;
if($phoneCode['err'] >= 4){
$phoneCodes[$phone] = null;
session('phone_code',$phoneCodes);
exit('请重新获取短信验证码');
}else{
$phoneCodes[$phone] = $phoneCode;
session('phone_code', $phoneCodes);
exit('验证码错误,你还可以尝试'.(4-$phoneCode['err']).'次');
}
}else{
exit('ok');
}
}
jquery中的ajax不像本身的ajax 还要去考虑兼容问题。所以我还是比较喜欢jquery的方式。
第二章 jquery中的ajax
① get方式:
$.get("url",'info',function(data){..............}); //url 是数据要提交给的控制器的地址,info是提交的数据,function是数据传输回来之后要执行的回调函数.其中data是控制器提交给前台的数据。
把数据提交给index.php控制器做处理。
eg:
如果传递的是变量的话可以用{recom : $('#id').val()} 不能用双引号包围,双引号是字符串处理了。
location.reload() 是刷新页面
②post方式:post方式和get方式一样的
③ajax方式:
eg 用实例说话:
具体的参考可以看看在线手册
另外:前台处理返回的json数据处理:
var data = eval("("+data+")")或者是var data = $.parseJSON(data);
在jquery中ajax 之后的function当中 $(this) 没有作用解决办法:在提交之前把$(this) 赋给一个变量,用变量来解决。
append中无法获取clone 之后的数据值 。 则可以使用live来解决。
添加地址栏上面的图标
在<head>与</head>之间加入代码
<link rel=”shortcut icon” href=”favicon.ico”>
注意:
1、图标文件名必须是favicon.ico
2、favicon.ico文件必须放到网站的根目录下
3、favicon.ico文件大小为16*16
$(".log_username").keyup(function(){
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "gi");
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z]) (?=.*[0-9]))).*$", "gi");
var enoughRegex = new RegExp("(?=.{6,}).*", "gi");
if (false == enoughRegex.test($(this).val())) {
$('.rst-mm').find('i').removeClass();
$('#passstrength').html('弱'); //密码小于六位的时候,密码强度图片都为灰色
}else if (strongRegex.test($(this).val())) {
$('.rst-mm').find('i').addClass('current');
$('#passstrength').html('强'); //密码为八位及以上并且字母数字特殊字符三项都包括
}else if (mediumRegex.test($(this).val())) {
$('.rst-mm').find('i').addClass('current').last().removeClass();
$('#passstrength').html('中'); //密码为七位及以上并且字母、数字、特殊字符三项中有两项,强度是中等
}else {
$('.rst-mm').find('i').first().addClass('current').siblings('i').removeClass(); //如果密码为6为及以下,就算 字母、数字、特殊字符三项都包括,强度也是弱的
$('#passstrength').html('弱');
}
return true;
});