JS登录验证
来源：互联网 发布：双筒望远镜 知乎 编辑：程序博客网 时间：2024/05/19 23:56
[#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 0
- js验证登录
- JS登录验证
- js登录验证
- js登录与注册验证
- JS验证登录信息(1)
- JS验证登录信息(2)
- JS生成登录验证码
- 登录注册验证码 js
- js验证是否pc登录
- js实现登录表单验证
- JS登录与注册验证
- 登录表单JS静态验证
- js表单验证_用户登录验证
- JS登录表单验证 正则验证
- 最简单的登录验证(js实现)
- 实用js验证用户注册登录代码
- HTML_登录时的JS验证方法
- jQuery 手写js 登录验证功能
- 个人博客建立（2）
- Servlet文件上传(ServletFIleUpload,DiskFileItemFactory,FileItem)
- 出来三个月了，随便写点什么
- 离散系统的差分方程、冲激响应和卷积分析
- UML图之类图，对象图和包图
- JS登录验证
- SVN服务器搭建和使用（二）
- xdubbo: 将 spring 管理的 bean 暴露为 http 服务
- 极客头条贡献者招募：欢迎懂分享的人
- 十二、ContentProvider和Uri详解
- nyoj 1185 最大最小值 【线段树】
- org.hibernate.ObjectNotFoundException: No row with the given identifier exists: [cn.itcast.erp.auth.
- 再谈如何将android studio项目转换成eclipse
- 记录Android系统中几个重要的文件目录
