首页
所有分类
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 相关文章推荐
js AspxButton的客户端操作
Jun 26 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
js采用concat和sort将N个数组拼接起来的方法
Jan 21 Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用（三）
Jun 04 Javascript
微信小程序--组件（swiper）详细介绍
Jun 13 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
微信小程序使用npm包的方法步骤
Aug 13 Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 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
IP(1) tcp/ip(1) tokenizer(1) update(2) 数据库卡死(1) 限流(2) 限速(1) Parser(1) 内置模块(1) 递归(1)
You might like
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
php rsa 加密，解密，签名，验签详解
2016/12/06 PHP
Jquery中获取iframe的代码
2011/01/11 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
drag-and-drop实现图片浏览器预览
2015/08/06 Javascript
js实现超简单的展开、折叠目录代码
2015/08/28 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
Python中的map、reduce和filter浅析
2014/04/26 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
Python如何省略括号方法详解
2020/03/21 Python
python3 logging日志封装实例
2020/04/08 Python
jupyter notebook 多行输出实例
2020/04/09 Python
项目考察欢迎辞
2014/01/17 职场文书
《童趣》教学反思
2014/02/19 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
创业大赛策划书
2014/03/01 职场文书
财务总监岗位职责
2014/03/07 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
实践论读书笔记
2015/06/29 职场文书
欢送会主持词
2015/07/01 职场文书
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
python中对列表的删除和添加方法详解
2022/02/24 Python