ajax验证用户登陆及记住密码
发布时间:2020-12-15 22:01:08 所属栏目:百科 来源:网络整理
导读:一个人独自负责一个项目,正好记下以前没实现过的技术点,今天就从登陆功能开始,前端是js验证,后端是php脚本验证并且添加了记住密码功能。 从 上图可以看出,前端主要的技术点是验证用户名和密码是否输入并给予提示,为了提高用户体验,用户一进入该页面,
一个人独自负责一个项目,正好记下以前没实现过的技术点,今天就从登陆功能开始,前端是js验证,后端是php脚本验证并且添加了记住密码功能。
从上图可以看出,前端主要的技术点是验证用户名和密码是否输入并给予提示,为了提高用户体验,用户一进入该页面,便自动聚焦到用户名输入框,同时在密码输入框里绑定个onkeypress事件,也就是用户输入完密码后,按回车键就可以完成操作,当然了这里做的事ajax验证,同时对于任何验证出错的信息都出现在用户名输入框上(见下图),并且设置了时限为3秒,也就是3秒后消失。
下面为html代码 <form> <span class="error_msg"></span> <p class="pst_relative"> <label class="input_msg"></label><input type="text" name="username" placeholder="用户名" class="login_input" maxlength="60"> </p> <p class="pst_relative"> <label class="input_msg"></label><input type="password" name="passwd" placeholder="密码" onkeydown="keydown(event)" class="login_input" maxlength="60"> </p> <p class="clearfix"> <span class="fl_left w_b60 psw_info"> <input type="checkbox" id="remmberpwd"> <label for="remmberpwd">记住密码</label> </span> <a class="fl_right psw_info" href="#">忘记密码?</a> </p> <p class="clearfix"> <input class="fl_left btn btn_login" type="button" value="登 录"> <a class="fl_right log_rega" href="#">免费注册</a></p> </form> 下面为js代码验证代码 $(function() { var height = $(document).height(); var bgheight = $(".login_bg").height(); $(".login_bg").css({"height": height + "px"}); $(".error_msg").hide(); // 默认账号输入框获得焦点 $('input[name=username]').focus(); // 点击登陆 $('.btn_login').click(function() { var username = $.trim($('input[name=username]').val()); var passwd = $.trim($('input[name=passwd]').val()); var remember = $('#remmberpwd').is(':checked') ? 1 : 0; if (username == '') { $(".error_msg").html('请填写用户名'); $(".error_msg").show().fadeOut(2000); $('input[name=username]').focus(); return false; } else if (passwd == '') { $(".error_msg").html('请填写密码'); $(".error_msg").show().fadeOut(2000); $('input[name=passwd]').focus(); return false; } // 异步提交 $.post('url','username=' + username + '&password=' + passwd + '&remember=' + remember,function(json) { // 验证失败 if (json.status == 0) { $(".error_msg").html(json.message); $(".error_msg").show().fadeOut(2000); // 成功 } else { console.log('success'); //location.href = ''; } },'json') }) }); // 判断回车 function keydown(e){ var e = e || event; if (e.keyCode==13) { $(".btn_login").click(); } } 认真看了下js验证代码后,应该知道有个remember变量,这个就是记住密码的,传到后台,php脚本通过接收该值,如果为1则说明需要记住密码,这里的技术点主要是php的一个方法setcookie ( string $name [,string $value [,int $expire = 0 [,string $path [,string $domain [,bool $secure = false [,bool $httponly = false ]]]]]] ),记住密码就利用了其中的第三个参数expire,那么在接收值为1时,便设置expire相关的过期时间,一般为1天也就是 setcookie('id',1,strtotime('+1 days')),同时要注意,由于cookie是存放在客户端的,因此那个id的值应该要加密,也就是存储的加密,提取的依据存储时加密规则反着来提取既可。记住密码后,那么下次再登陆时,便可以在相关的方法里这么写着 // 首页登录 public function index() { if (isLogin()) { echo 'you have already login in'; } else { $this->display(); } } 看到上面的代码应该知道isLogin就是验证用户之前是否已经记住密码了吧。
ok,就记到这,这个点过去了,这个项目还有好多没的点,以后有的是时间写。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |