jQuery登录验证

[#ftl]
[#include "/_inc/inc.ftl"]
<html>
<head>
    [#include "/_inc/meta.ftl"]
    [#include "/_inc/link.ftl"]
    [#include "/_inc/css.ftl"]
    <link rel="stylesheet" href="${ctxPath}/resources/assets/css/login.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
    
</head>

<style>

.login_panel_01{ background-color: #FFF; height: 316px;}
.panel_01{margin-bottom: 20px;background-color:#F2F2F4;border: 1px solid transparent;border-radius: 4px;box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);}

</style>

<body>

<!--head start-->
<div class="container-fluid">
    <div class="row" style="height:150px;">
    </div>
    <div class="row">
        <div class="col-xs-1 col-xs-1" style="background-image: url(${ctxPath}/resources/assets/img/line.png); height: 394px;"></div>
        <div class="col-xs-5 col-xs-5" style="background-image: url(${ctxPath}/resources/assets/img/login_big.png); height: 394px;">
          <div id="carousel-banner" class="carousel slide" data-ride="carousel" style="height:394px;">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-banner" data-slide-to="0" class=""></li>
                    <li class="active" data-target="#carousel-banner" data-slide-to="1"></li>
                    <li data-target="#carousel-banner" data-slide-to="2"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner">
                    <div class="item">
                        <img src="${ctxPath}/resources/assets/img/l_1.png" style="height:394px;">
                    </div>
                    <div class="item active">
                        <img src="${ctxPath}/resources/assets/img/l_2.png" style="height:394px;">
                    </div>
                    <div class="item">
                        <img src="${ctxPath}/resources/assets/img/l_3.png" style="height:394px;">
                    </div>
                </div>
            </div>
        
        </div>
        <div class="col-xs-4">
            <div class="row login_title" style="width:auto">
                <img src="${ctxPath}/resources/assets/img/logo.png" style="float:left">
                <span style="float:left; display:block; padding-top:30px" class="login_font">亚市互联网+汽车平台后台管理</span>
            </div>
<!--head end-->

 
             <form action="${ctxPath}/auth/login" method="post" onSubmit="return checkAll(this)">
                     <div class="row login_panel_01">
                        <div class="panel_01 panel-default">
                        
                            <div class="panel-body">
                                 <span id="warn1" class="" style="color:red;"></span>
                                  <span id="warn1"class="" style="color:red;"></span>
                                  <span id="msg">${msg ? default("")}</span>
                                  
                          [#if flag?? && flag=="0"]
                              <div  class="alert alert-warning" role="alert">
                              <span class="glyphicon glyphicon-warning-sign" style="color:green;"></span>
                              <span >修改成功,请重新登录</span>
                              </div>
                          [/#if]
                          
                            <div class="input-group">
                             <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                             <input id="username" name="username" type="text" class="form-control" placeholder="用户名"  onblur="javascript:checkName(this)" value="${username? default("")}">
                            </div>
                              <br>
                              <div class="input-group">
                             <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                             <input type="password" id="password" name="password" class="form-control" placeholder="密码"  onblur="javascript:checkPassword(this)" >
                            </div>    
                            <br>
                            <button type="submit" class="col-xs-12 btn btn-lg btn-success btn-block" onsubmit="javascript:return checkAll();">登  录</button>

                          </div>
                      
                     </div>
                </div>
             </form>
            </div>
        <div class="col-xs-2 col-xs-2" style="background-image: url(${ctxPath}/resources/assets/img/line.png); height: 394px;"></div>
    </div>
    <div class="row">
    </div>
</div>

<script type="text/javascript">
    $(function() {
          var    msgVal=$("#msg").text();
          if(msgVal=!null&& msgVal!=""){
              $("#warn").addClass("alert alert-warning");
            $("#warn1").addClass("glyphicon glyphicon-warning-sign");
          }
    });
        function checkName(obj){
            var nameVal=$.trim($(obj).val());
            if(nameVal==null || nameVal==""){
                $("#msg").text("用户名不允许为空");
                $("#warn").addClass("alert alert-warning");
                $("#warn1").addClass("glyphicon glyphicon-warning-sign");
                
            }else{
                $("#msg").text("");
                $("#warn").removeClass();
                $("#warn1").removeClass();
            }
        }
        function checkPassword(obj){
            var passwordVal=$.trim($(obj).val());
            if(passwordVal==null || passwordVal==""){
                $("#msg").text("密码不允许为空");
                $("#warn").addClass("alert alert-warning");
                $("#warn1").addClass("glyphicon glyphicon-warning-sign");
                
            }else{
                $("#msg").text("");
                $("#warn").removeClass();
                $("#warn1").removeClass();
            }
            
        }
        function checkAll(){
            var result=true;
            var username=$("#username").val();
            username=username.trim();
            var password=$("#password").val();
            password=password.trim();
            if(username==null || username==""){
                $("#msg").text("用户名不允许为空");
                $("#warn").addClass("alert alert-warning");
                $("#warn1").addClass("glyphicon glyphicon-warning-sign");
                result=false;
                return result;
            }
            
            if(password==null || password==""){
                $("#msg").text("密码不允许为空");
                $("#warn").addClass("alert alert-warning");
                $("#warn1").addClass("glyphicon glyphicon-warning-sign");
                result=false;
                return result;
            }
            
            $("#msg").text("");
            $("#warn").removeClass();
            $("#warn1").removeClass();
            return result;
        }
        
        function trim(str){ //删除左右两端的空格
                   return str.replace(/(^\s*)|(\s*$)/g, "");
          }
</script>

</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术博文

Linux配置防火墙,开启80端口、3306端口

vi /etc/sysconfig/iptables  -A INPUT -m state –state NEW -m tcp -p tcp –dport 80...

1.7K90
来自专栏米扑专栏

Linux iptables 防火墙常用规则

36470
来自专栏蓝天

iptables简单应用

可以修改/etc/rc.d/boot.local让规则重启后也能生效,如: /sbin/iptables -F /sbin/iptables -A INP...

10930
来自专栏Java学习123

centos7 关闭firewall安装iptables并配置

62460
来自专栏米扑专栏

Linux iptables 防火墙常用规则

上面这两条,请注意--dport为目标端口,当数据从外部进入服务器为目标端口;反之,数据从服务器出去则为数据源端口,使用 --sport 同理,-s是指定源地址...

503120
来自专栏雨过天晴

原 CentOS下的iptables常用操

30340
来自专栏刘远飞的专栏

Docker快速入门以及安装使用

docker通过内核虚拟化技术(namespace及cgroups等)来提供容器的资源隔离与安全保障等,由于docker通过操作系统层的虚拟化实现隔离,所以do...

6K00
来自专栏乐享123

Migrate Firewalld to Iptables on Centos7

15030
来自专栏运维小白

10.14 iptables语法

linux防火墙-netfilter 查看iptables规则:iptables -nvL iptables -F 清空规则 service iptab...

23560
来自专栏Netkiller

Struts2 S2-046, S2-045 Firewall(漏洞防火墙)

开发中遇到一个问题,Struts2 已经升级到2.3.32但是故障依旧,绞尽脑汁找不出原因。此路不同另寻它路,我便想从运维角度暂时解决这个问题,给开发留出足够的...

30660

扫码关注云+社区

领取腾讯云代金券