首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

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

- Author -

80s八零年代

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
web前端开发也需要日志
Dec 09 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
javascript的console.log()用法小结
May 31 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
Sep 28 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 Javascript
jQuery实现的图片轮播效果完整示例
Sep 12 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 Javascript
微信小程序之左右布局的实现代码
Dec 13 Javascript
react-intl实现React国际化多语言的方法
Sep 27 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
数据合并(1) element-ui(1) BufferPool(1) 复合索引(1) 逻辑函数(1) http_stub_status_module(1) 缓存机制(1) 连接查询(1) zabbix(9) pongo2(1)
You might like
php提示undefined index的几种解决方法
2012/05/21 PHP
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
checkbox 多选框 联动实现代码
2008/10/22 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
TensorFlow实现Logistic回归
2018/09/07 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
英国DIY汽车维修配件网站：DIY Car Service Parts
2019/08/30 全球购物
应届毕业生个人自荐信范文
2013/11/30 职场文书
仲裁协议书
2014/09/26 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
春节晚会开场白
2015/05/29 职场文书
校长新学期致辞
2015/07/30 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
导游词之临安白水涧
2019/11/05 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
关于Vue中的options选项
2022/03/22 Vue.js