使用bootstrap画登录页面并实现表单校验与“记住我”功能

先贴上效果图

如何实现呢？请看下面

先引用必备css和js

bootstrap.min.css

font-awesome.css //字体图标

bootstrapValidator.css

jquery-2.1.0.min.js

bootstrap.min.js

bootstrapValidator.js //表单校验

jquery.cookie.js //将用户名和密码写入cookie 用作“记住我”功能

布局代码

<img id="img" src="img/2.png" alt=""><div class="container"><div><h2>XXXX系统</h2></div><div class="form row"><div class="form-horizontal col-md-offset-3" id="login_form"><h3 class="form-title">用户登录</h3><form id="form" action=""><div class="col-md-9"><div class="form-group"><i class="fa fa-user fa-lg"></i><input class="form-control required" type="text" placeholder="请输入登录名" id="loginName" name="username" autofocus="autofocus" maxlength="20"/></div><div class="form-group"><i class="fa fa-lock fa-lg"></i><input class="form-control required" type="password" placeholder="请输入密码" id="password" name="password" maxlength="8"/>                               </div><div class="form-group"><label class="checkbox pull-left"><input type="checkbox" name="remember" id="remember" value="0"/>记住我</label><label class="checkbox pull-right"><a href="menu.html" >注册新账号</a></label></div><div class="form-group col-md-offset-9"><button type="submit" class="btn btn-success pull-right" name="submit">登录</button></div></div></form></div></div></div>

下面是登录与表单校验和实现"记住我"功能

（注意：在使用bootstrapValidator期间遇到一个问题表单通过验证但提交表单没有反应我在下一篇中讲解决方案）

var path = "${pageContext.request.contextPath}";$(function () {getCookie();//获取cookieremeberNameAndPwd();//rememberMe点击事件validate();//校验与登录});function validate(){$('form').bootstrapValidator({fields: {loginName: {message: '用户名验证失败',validators: {notEmpty: {message: '用户名不能为空'}}},password: {validators: {notEmpty: {message: '密码不能为空'}}}}}).on('success.form.bv', function(e) {$("form").submit(function(){var flag = $('#form').data("bootstrapValidator").isValid();//校验合格if(flag){var load = top.layer.load();var $form = $('#form');$.ajax({url:$form.attr('action'),data:$form.serialize(),type:'post',beforeSend:function(){layer.msg('正在登录');},success:function(data){if(data=="success"){setTimeout(function(){layer.close(load);layer.msg('登录成功');setAndRemoveCookie();//是否写入cookie},1000);setTimeout(function(){//登录返回window.location.href=path+'/menu/get.do';},2000);}else{setTimeout(function(){layer.close(load);layer.msg('身份验证失败,请检查用户名或密码是否正确!',{time:3500 //3.5秒钟之后关闭});},1000);}},error:function(e){console.log(e);layer.msg('出错咯o(╥﹏╥)o,请与后台联系!',{btn:'我知道了'})}})}})});}//记住用户名,默认不记住var checkFlag = false;function remeberNameAndPwd(){//这里是当页面是从注册页面注册成功过来 var remFlag = $("input[type='checkbox']").is(":checked");if(remFlag==true){checkFlag = true; }//当在login.jsp页面点击是否记住$("#rememberMe").click(function(){var remFlag = $("input[type='checkbox']").is(":checked");if(remFlag==true){$("#rememberMe").attr("checked",true);checkFlag=true;}else{$("#rememberMe").attr("checked",false);checkFlag=false;}})}//写入cookie与删除function setAndRemoveCookie(){//注意 密码写入cookie的时候这里没有写加密 是不安全的if(checkFlag){var loginName = $("#loginName").val();var password = $("#password").val();$.cookie("remember","true",{expires : 7 })//单位：天$.cookie("loginName",loginName,{expires: 7 });$.cookie("password",password,{expires: 7 })console.log($.cookie("loginName"));}else{//删除cookie$.cookie("remember","false",{expires:-1 });$.cookie("loginName",null,{expires:-1});$.cookie("password",null,{expires:-1});console.log($.cookie("password"));}}//获取cookiefunction getCookie(){if($.cookie("remember")=="true"){$("#rememberMe").attr("checked",true);$("#loginName").val($.cookie("loginName"));$("#password").val($.cookie("password"));console.log($.cookie("password"));}}

最后给出css

#img{width:100%;position: fixed; right: 0; bottom: 0;min-width: 100%; min-height: 100%;height: auto;z-index: -100;background-size: cover;
}
.form{background: rgba(255,255,255,0.2);width:420px;margin:120px auto;margin-right: 350px
}/*阴影*/
.fa{display: inline-block;top: 25px;left: 6px;position: relative;color: #ccc;
}input[type="text"],input[type="password"]{padding-left:26px;
}.checkbox{padding-left:21px;
}

使用bootstrap画登录页面并实现表单校验与“记住我”功能相关推荐

[小黄书管理平台]登录页面和模型驱动表单
上一章我们对小黄书管理平台实现了中文国际化的支持,让我们的管理平台可以根据浏览器当前的语言来自动显示中文或者英文. 本章我们计划开始看下ng2-admin的登录页面: 如何通过Formbuilder来 ...
form表单校验复杂系列--- form表单内插入独立的数据表格，动态校验数据表格内每行的文件上传
form表单校验复杂系列- form表单内插入独立的数据表格,动态校验数据表格内每行的文件上传前言公司项目有个模块需要优化form表单内,插入独立的数据表格,表格内容是文件上传,需要利用外部表单提 ...
html表单注册跳转页面,出现一个问题，点击“注册”按钮页面进入注册表单后自动跳转回登录页面...
源自:4-5 单页面应用Demo2(2) 出现一个问题,点击"注册"按钮页面进入注册表单后自动跳转回登录页面用户名: 密码: 登录注册用户名: 密码: 再次输入密码: 确定 ...
【前端3】jquary：页面加载，选择器，隔行换色，Dom，全选，动画，遍历，广告/抽奖，表单校验插件
文章目录 1.jquery框架引入:$("mydiv") 当成id选择器 2.jquery版本/对象:$(js对象) -> jquery对象 3.jquery的页面加载事件: ...
Day84.尚好房 — 功能提取、页面封装、jquery-validate表单校验、完成角色 | 用户管理模块
目录角色管理模块一.角色管理代码封装 ★ 1.封装BaseDao 2.封装BaseDao 3.封装BaseServiceImpl 4.封装Controller层二.前端页面封装 1.封装头部c ...
Bootstrap之表格，按钮，表单和图片的样式
Bootstrap之表格,按钮,表单和图片的样式本文中,都是结合本人的学习Bootstrap时所做的练习,来理解通过内置的 CSS 定义,Bootstrap的表格,按钮,表单和图片是如何来显示各种丰 ...
js登录特效+ajax提交表单+异步刷新验证
今天成功测试一种js登录特效+ajax提交表单+异步刷新验证,登录时特效提醒,无刷新ajax提交表单,获取验证结果,跳转正式页面:废话不多说,先直接分享代码: 1.主界面index.php 加载的这 ...
纯html点击按钮弹出表单,Bootstrap使用模态框modal实现表单提交弹出框
Bootstrap 模态框(Modal)插件模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如 ...
2.vue3医疗在线问诊项目 - _登录模块 ==＞代码片段、css变量主题定制、cp-nav-bar组件封装、svg打包精灵图插件、cp-icon组件封装、表单校验、密码登录、短信验证码登录及两者
2.医疗在线问诊项目 - _登录模块 ==> 代码片段.css变量主题定制.cp-nav-bar组件封装.svg打包精灵图插件.cp-icon组件封装.表单校验.密码登录.短信验证码登录及两者的 ...
【前端2】js：原始类型，运算符，调试，页面加载，轮播图，Bom（对象，时钟），Dom（全选全不选，省市级联，隔行/触摸换色，表单校验）
文章目录 1.js两种引入:js最终要引入到html在浏览器中运行 2.js五大原始类型:undefined 3.js的运算符和流程控制:js不支持单&和单|性能低 4.案例_99乘法表:So ...

使用bootstrap画登录页面并实现表单校验与“记住我”功能

使用bootstrap画登录页面并实现表单校验与“记住我”功能相关推荐

最新文章

热门文章