验证用户名，密码，验证码，发送alax请求进行登录代码 





 1 //html代码    
 2 <div class="layui-form" id="larry_form">
 3              <div class="layui-form-item">
 4                    <label class="layui-form-label">用户名:</label>
 5                    <input type="text" name="userName" required  lay-verify="" autocomplete="off" class="layui-input larry-input userName" placeholder="请输入您的用户名">
 6              </div>
 7              <div class="layui-form-item" id="password">
 8                    <label class="layui-form-label">密码:</label>
 9                    <input type="password" name="password" required lay-verify="password" autocomplete="off" class="layui-input larry-input psw" placeholder="请输入您的登录密码">
10              </div>
11              <div class="layui-form-item larry-verfiy-code" id="larry_code">
12                     <input type="text" id="code" name="code" lay-verify="" autocomplete="off" maxlength="4" class="layui-input larry-input " placeholder="输入验证码" >
13                     <div class="code">
14                            <div class="arrow" style="opacity:0.6;filter:alpha(opacity=60);"></div>
15                            <div class="code-img"><img src="/randomCode" alt="" class="layui-disabled" style="opacity:0.6;filter:alpha(opacity=60);" id="codeimage" disabled="disabled"></div>
16                            <a id="change" class="change" style="opacity:0.6;filter:alpha(opacity=60);" title="看不清,点击更换验证码"><i></i></a>
17                     </div>
18              </div>
19             
20              <div class="layui-form-item">
21                   <button class="layui-btn larry-btn submit" lay-filter="submit" lay-submit>立即登录</button>
22              </div>
23         </div>






 


 1     $(document).keydown(function(event){
 2         if(event.keyCode==13){
 3             $(".submit").click();
 4         }
 5     });
 6     $('.submit').click(function(){
 7        var userName = $('.userName').val();
 8         var psw = $('.psw').val();
 9         var code = $('#code').val();
10         if(userName.trim()==''){
11             layer.alert("用户名不能为空！", {icon: 2,title:'提示'});
12             return;
13         }
14         if(psw.trim()==''){
15             layer.alert("密码不能为空！", {icon: 2,title:'提示'});
16             return;
17         }
18         // if(code.trim()==''){
19         //     layer.alert("验证码不能为空！", {icon: 2,title:'提示'});
20         //     return;
21         // }
22        $.ajax({
23            type: "post",
24            url: "/login",
25            // data: "userName="+userName+"&password="+psw+"&code="+code,
26            data: "userName="+userName+"&password="+psw,
27            success: function (data) {
28                var message = data.msg;
29                if(data.code === '0'){
30                    layer.msg(message, {icon: 1, time: 1000});
31                    setTimeout(function () {
32                        window.location.href = 'index.html';
33                     }, 1000);
34                } else {
35                    layer.alert(message, {
36                        icon: 2,title:'提示'
37                    });
38                    // $('.userName').val('');
39                    // $('.psw').val('');
40                    // $('#code').val('');
41                    // // $("#codeimage").attr("src", '/randomCode?t=' + Math.random());
42                    return;
43                }
44            },
45            error: function () {
46            }
47        })
48     })
49     




 







            

            
posted @ 
2018-04-26 07:37 
前端极客 
阅读(4610) 
评论(0) 
编辑 
收藏 
举报