Bootstrap实现登录校验表单(带验证码)


Posted in Javascript onJune 23, 2016

这个登陆窗口是双登陆窗口的,对IE8及早期版本不支持,可以根据自己的开发语言更换,我这个是asp的,其中的引用文件可以在网络上自行下载,如找不到可以留下邮箱~!

Bootstrap实现登录校验表单(带验证码)

关键代码如下所示:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>scm登陆界面</title>
<style type="text/css">
body {
background-color: #999;
}
</style>
<link rel="stylesheet" href="../bootstrap335/css/bootstrap.min.css">
<link rel="stylesheet" href="../bootstrap335/css/bootstrapValidator.min.css">
<script src="../bootstrap335/js/jquery-2.1.4.min.js"></script>
<script src="../bootstrap335/js/bootstrap.min.js"></script>
<script src="../bootstrap335/js/bootstrapValidator.min.js"></script>
<% 
Response.Buffer = True 
Response.ExpiresAbsolute = Now() - 1 
Response.Expires = 0 
Response.CacheControl = "no-cache" 
%>
</head>
<body >
<!--
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" ui-sref=".">******系统 (ver 1.0.0 beta)</a>
</div>
<div class="collapse navbar-collapse" id="navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="small"><a href="http://www.my80s.cc" target="_blank">80s ©2015-2010</a></li>
</ul>
</div> 
</div>
</nav>-->
<div class="col-lg-5 col-lg-offset-2">
<div class="page-header" style="margin-top:5em;">
<h2>******管理系统</h2>
</div>
</div>
<div class="col-md-offset-4 col-md-4" >
<div class="panel panel-primary" style="margin-top:3em;" >
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#Prv" data-toggle="tab">供应商登陆</a></li>
<li><a href="#CPrv" data-toggle="tab">生产商登陆</a></li>
</ul>
<div id="myTabContent" class="tab-content"> 
<div class="tab-pane fade in active" id="Prv">
<div class="well well-sm " ><h3 class="panel-title">
供应商登陆</h3>
</div>
<div class="panel-body">
<form name="LoginG" id="LoginG" action="Admin_ChkLogin_G.asp" method="post" target="_parent" >
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">账号</span>
<input name="Username" type="text" class="form-control" placeholder="Username" >
<!--<span class="help-block" id="UsernameMessage" /> -->
</div><br />
</div><!-- /form-group-->
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">密码</span>
<input name="Password" type="Password" class="form-control" placeholder="Password">
<!--<span class="help-block" id="PasswordMessage" /> -->
</div> 
</div><!-- /form-group--> 
<h5>请将如下计算结果填入文本框内:</h5>
<div class="form-group form-horizontal">
<label class="col-lg-3 control-label " id="captchaOperation"></label>
<div class="col-lg-9">
<input type="text" class="form-control " name="captcha" />
</div>
</div><br /><br /> <br /> 
<div class="form-group">
<input class="btn btn-primary btn-block" type="submit" value="登录" />
</div>
</form>
</div><!-- /panel-body -->
</div><!-- tab-pane fade in active-->
<div class="tab-pane fade" id="CPrv">
<div class="well well-sm"><h3 class="panel-title">
生产商登陆</h3>
</div>
<div class="panel-body"> 
<form name="LoginS" id="LoginS" action="Admin_ChkLogin_S.asp" method="post" target="_parent" >
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">账号</span>
<input name="Username2" type="text" class="form-control" placeholder="Username" >
<!--<span class="help-block" id="UsernameMessage" /> -->
</div><br />
</div><!-- /form-group-->
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">密码</span>
<input name="Password2" type="Password" class="form-control" placeholder="Password">
<!--<span class="help-block" id="PasswordMessage" /> -->
</div> 
</div><!-- /form-group--> 
<h5>请将如下计算结果填入文本框内:</h5>
<div class="form-group form-horizontal">
<label class="col-lg-3 control-label " id="captchaOperation2"></label>
<div class="col-lg-9">
<input type="text" class="form-control " name="captcha2" />
</div>
</div><br /><br /> <br /> 
<div class="form-group">
<input class="btn btn-primary btn-block" type="submit" value="登
录" />
</div>
</form>
</div><!-- /panel-body -->
</div><!-- tab-pane fade--> 
</div><!--myTabContent-->
</div>
<script type="text/javascript">
$(document).ready(function() {
// Generate a simple captcha
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
};
function generateCaptcha() {
$('#captchaOperation').html([randomNumber(1, 50), '+', randomNumber(1, 50), '='].join(' '));
};
generateCaptcha();
$('#LoginG')
.bootstrapValidator({
//message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
Username: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: '供货商账户不能为空'
},
stringLength: {
min: 5,
max: 10,
message: '供货商账号长度 5-10'
},
/*remote: {
url: 'remote.php',
message: 'The username is not available'
},*/
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '只接受数字和字母 '
}
}
},
Password: {
validators: {
notEmpty: {
message: '密码不能为空'
}
}
},
captcha: {
validators: {
callback: {
message: '验证码错误',
callback: function(value, validator) {
var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
return value == sum;
}
}
}
}
}
})
.on('error.form.bv', function(e) {
var $form = $(e.target),
bootstrapValidator = $form.data('bootstrapValidator');
if (!bootstrapValidator.isValidField('captcha')) {
// The captcha is not valid
// Regenerate the captcha
generateCaptcha();
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
// Generate a simple captcha
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
};
function generateCaptcha() {
$('#captchaOperation2').html([randomNumber(1, 50), '+', randomNumber(1, 50), '='].join(' '));
};
generateCaptcha();
$('#LoginS')
.bootstrapValidator({
//message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
Username2: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: '供货商账户不能为空'
},
stringLength: {
min: 5,
max: 10,
message: '供货商账号长度 5-10'
},
/*remote: {
url: 'remote.php',
message: 'The username is not available'
},*/
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '只接受数字和字母 '
}
}
},
Password2: {
validators: {
notEmpty: {
message: '密码不能为空'
}
}
},
captcha2: {
validators: {
callback: {
message: '验证码错误',
callback: function(value, validator) {
var items = $('#captchaOperation2').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
return value == sum;
}
}
}
}
}
})
.on('error.form.bv', function(e) {
var $form = $(e.target),
bootstrapValidator = $form.data('bootstrapValidator');
if (!bootstrapValidator.isValidField('captcha')) {
// The captcha is not valid
// Regenerate the captcha
generateCaptcha();
}
});
});
</script>
</body>
</html>
Javascript 相关文章推荐
使用GruntJS链接与压缩多个JavaScript文件过程详解
Aug 02 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 Javascript
js读取注册表的键值示例
Sep 25 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
js确认删除对话框适用于a标签及submit
Jul 10 Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 Javascript
canvas时钟效果
Feb 16 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
微信小程序实现animation动画
Jan 26 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
JavaScript自学笔记(必看篇)
Jun 23 #Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 #Javascript
JS使用JSON作为参数实例分析
Jun 23 #Javascript
浅析Bootstrap表格的使用
Jun 23 #Javascript
浅析Bootstrap验证控件的使用
Jun 23 #Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 #Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 #Javascript
You might like
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
pygame实现飞机大战
2020/03/11 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
大专计算机个人求职的自我评价
2013/10/21 职场文书
组织关系转移介绍信
2014/01/16 职场文书
西安交大自主招生自荐信
2014/01/27 职场文书
大学生校园创业计划书
2014/02/08 职场文书
项目总经理岗位职责
2014/02/14 职场文书
教师年度考核评语
2014/04/28 职场文书
计划生育证明格式范本
2014/09/12 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
明星邀请函
2015/02/02 职场文书
初中家长意见
2015/06/03 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL