您的位置:首页 > Web前端 > JQuery

常用jquery备份

2014-01-20 10:16 357 查看

第一章 找回密码

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来解决。

添加地址栏上面的图标

ico图标

在<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;

});

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: