zoukankan      html  css  js  c++  java
  • 验证用户名,密码,验证码,发送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     
  • 相关阅读:
    SpringMVC+bootstrap-fileinput文件上传插件使用入门
    [Java]实现Comparable接口不严谨导致Comparison method violates its general contract!
    2021寒假ACM集训队第一次训练-搜索(一)
    第八届“图灵杯”NEUQ-ACM程序设计竞赛个人赛-热身赛
    2021蓝桥杯第三次训练赛
    2021年蓝桥杯第二次训练赛
    2021年蓝桥杯第一次训练赛
    HDU 1312 Red and Black
    HDU 1010 Tempter of the Bone
    HDU 3500 Fling
  • 原文地址:https://www.cnblogs.com/yangguoe/p/8949281.html
Copyright © 2011-2022 走看看