首页
所有分类
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如何取消事件冒泡
Sep 23 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
Apr 20 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
Jun 19 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
vue项目动态设置页面title及是否缓存页面的问题
Nov 08 Javascript
React手稿之 React-Saga的详解
Nov 12 Javascript
Vue实现表格批量审核功能实例代码
May 28 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 Javascript
JS工厂模式开发实践案例分析
Oct 17 Javascript
vue中英文切换实例代码
Jan 21 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
推荐信(292) 职业生涯规划书(234) 求职信(1029) 自荐信(981) 岗位职责(1324) SOA面试题(9) 自我评价(886) 自我鉴定(671) 创业计划书(312) Delphi面试题(13)
You might like
Zend Guard使用指南及问题处理
2015/01/07 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
2010/06/07 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
Python的迭代器和生成器使用实例
2015/01/14 Python
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
python搜索指定目录的方法
2015/04/29 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
python3爬取各类天气信息
2018/02/24 Python
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
python 获取url中的参数列表实例
2018/12/18 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
Python如何实现动态数组
2019/11/02 Python
python函数不定长参数使用方法解析
2019/12/14 Python
python利用platform模块获取系统信息
2020/10/09 Python
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
Merchant 1948澳大利亚：新西兰领先的鞋类和靴子供应商
2018/03/24 全球购物
技术总监管理职责范本
2014/03/06 职场文书
幼儿园评语大全
2014/04/17 职场文书
2014年母亲节寄语
2014/05/07 职场文书
企业贷款委托书格式
2014/09/12 职场文书
个人整改措施书面材料
2014/10/24 职场文书
python如何正确使用yield
2021/05/21 Python
mysql left join快速转inner join的过程
2021/06/30 MySQL