ajax验证用户登陆及记住密码

男娘i 2022-08-08 06:22 263阅读 0赞

一个人独自负责一个项目，正好记下以前没实现过的技术点，今天就从登陆功能开始，前端是js验证，后端是php脚本验证并且添加了记住密码功能。

![SouthEast][]

从上图可以看出，前端 西安嘉信铁路器材有限公司官网（[http://www.xianjiaxin198.com/][http_www.xianjiaxin198.com]）主要的技术点是验证用户名和密码是否输入并给予提示，为了提高用户体验，用户一进入该页面，便自动聚焦到用户名输入框，同时在密码输入框里绑定个onkeypress事件，也就是用户输入完密码后， 西安嘉信铁路器材有限公司官网（[http://www.xianjiaxin198.com/][http_www.xianjiaxin198.com]）按回车键就可以完成操作，当然了这里做的事ajax验证，同时对于任何验证出错的信息都出现在用户名输入框上（见下图），并且设置了时限为3秒，也就是3秒后消失。

![SouthEast 1][]

下面为html代码

1.  **<****form****>**  
2.      **<****span** class="error\_msg"**>****</****span****>**  
3.      **<****p** class="pst\_relative"**>**  
4.          **<****label** class="input\_msg"**>****</****label****>****<****input** type="text" name="username" placeholder="用户名" class="login\_input" maxlength="60"**>**  
5.      **</****p****>**  
6.      **<****p** class="pst\_relative"**>**  
7.          **<****label** class="input\_msg"**>****</****label****>****<****input** type="password" name="passwd" placeholder="密码" onkeydown="keydown(event)" class="login\_input" maxlength="60"**>**  
8.      **</****p****>**  
9.      **<****p** class="clearfix"**>**  
10.         **<****span** class="fl\_left w\_b60 psw\_info"**>**  
11.             **<****input** type="checkbox" id="remmberpwd"**>**  
12.             **<****label** for="remmberpwd"**>**记住密码**</****label****>**  
13.         **</****span****>**  
14.         **<****a** class="fl\_right psw\_info" href="\#"**>**忘记密码？**</****a****>**  
15.     **</****p****>**  
16.     **<****p** class="clearfix"**>**  
17.         **<****input** class="fl\_left btn btn\_login" type="button" value="登   录"**>**  
18.         **<****a** class="fl\_right log\_rega" href="\#"**>**免费注册**</****a****>****</****p****>**  
19. **</****form****>**

下面为js代码验证代码( 西安嘉信铁路器材有限公司官网（[http://www.xianjiaxin198.com/][http_www.xianjiaxin198.com]）)

1.  $(**function**() \{  
2.      **var** height = $(document).height();  
3.      **var** bgheight = $(".login\_bg").height();  
4.      $(".login\_bg").css(\{ "height": height + "px"\});  
5.    
6.      $(".error\_msg").hide();  
7.    
8.      // 默认账号输入框获得焦点  
9.      $('input\[name=username\]').focus();  
10.   
11.     // 点击登陆  
12.     $('.btn\_login').click(**function**() \{  
13.         **var** username = $.trim($('input\[name=username\]').val());  
14.         **var** passwd = $.trim($('input\[name=passwd\]').val());  
15.         **var** remember = $('\#remmberpwd').is(':checked') ? 1 : 0;  
16.         **if** (username == '') \{  
17.             $(".error\_msg").html('请填写用户名');  
18.             $(".error\_msg").show().fadeOut(2000);  
19.             $('input\[name=username\]').focus();  
20.             **return** **false**;  
21.         \} **else** **if** (passwd == '') \{  
22.             $(".error\_msg").html('请填写密码');  
23.             $(".error\_msg").show().fadeOut(2000);  
24.             $('input\[name=passwd\]').focus();  
25.             **return** **false**;  
26.         \}  
27.   
28.         // 异步提交  
29.         $.post('url', 'username=' + username + '&password=' + passwd + '&remember=' + remember, **function**(json) \{  
30.   
31.             // 验证失败  
32.             **if** (json.status == 0) \{  
33.                 $(".error\_msg").html(json.message);  
34.                 $(".error\_msg").show().fadeOut(2000);  
35.   
36.             // 成功  
37.             \} **else** \{  
38.                 console.log('success');  
39.                 //location.href = '';  
40.             \}  
41.         \}, 'json')  
42.     \})  
43. \});  
44.   
45. // 判断回车  
46. **function** keydown(e)\{  
47.     **var** e = e || event;  
48.     **if** (e.keyCode==13) \{  
49.         $(".btn\_login").click();  
50.     \}  
51. \}

认真看了下js验证代码后，应该知道有个remember变量，这个就是记住密码的，传到后台，php脚本通过接收该值，如果为1则说明需要记住密码，这里的技术点主要是php的一个方法setcookie ( string $name \[, string $value \[, int $expire = 0 \[, string $path \[, string $domain \[, bool $secure = false \[, bool $httponly = false \]\]\]\]\]\] )，记住密码就利用了其中的第三个参数expire， 西安嘉信铁路器材有限公司官网（[http://www.xianjiaxin198.com/][http_www.xianjiaxin198.com]）那么在接收值为1时，便设置expire相关的过期时间，一般为1天也就是 setcookie('id',1,strtotime('+1 days')),同时要注意，由于cookie是存放在客户端的，因此那个id的值应该要加密，也就是存储的加密，提取的依据存储时加密规则反着来提取既可。记住密码后，那么下次再登陆时，便可以在相关的方法里这么写着

1.  // 首页登录  
2.  **public** **function** index() \{  
3.    
4.      **if** (isLogin()) \{  
5.          echo 'you have already login in';  
6.      \} **else** \{  
7.          $this\->display();  
8.      \}  
9.  \}

看到上面的代码应该知道isLogin就是验证用户之前是否已经记住密码了吧。

ok，就记到这，这个点过去了， 西安嘉信铁路器材有限公司官网（[http://www.xianjiaxin198.com/][http_www.xianjiaxin198.com]）这个项目还有好多没的点，以后有的是时间写。

转自：http://blog.csdn.net/molaifeng/article/details/10474509

西安嘉信铁路器材有限公司官网（[http://www.xianjiaxin198.com/][http_www.xianjiaxin198.com]）

[SouthEast]: /images/20220805/29c112625d154f149aa29fa32db987f9.png
[http_www.xianjiaxin198.com]: http://www.xianjiaxin198.com/
[SouthEast 1]: /images/20220805/2faacb8a482840578358bebb469f85aa.png