首页
所有分类
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 07 Javascript
基础的prototype.js常用函数及其用法
Mar 10 Javascript
javascript 选择文件夹对话框(web)
Jul 07 Javascript
javascript suggest效果 自动完成实现代码分享
Feb 17 Javascript
jquery的live使用注意事项
Feb 18 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
javascript进行四舍五入方法汇总
Dec 16 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
Apr 27 Javascript
我所理解的JavaScript中的this指向
Sep 04 Javascript
利用js实现简单开关灯代码
Nov 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
绘图(1) variable_scope(1) 三子棋(2) blinker(1) name_scope (1) Keras(3) turtle(1) 神经网络(7) data(4) 信号库(1)
You might like
谈谈新手如何学习PHP
2006/12/23 PHP
PHP similar_text 字符串的相似性比较函数
2010/05/26 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
JavaScript字符串对象substring方法入门实例（用于截取字符串）
2014/10/17 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
Python模拟三级菜单效果
2017/09/11 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
django model通过字典更新数据实例
2020/04/01 Python
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
澳大利亚药房在线：ThePharmacy
2017/10/04 全球购物
给小学生的新年寄语
2014/04/04 职场文书
开展读书活动总结
2014/06/30 职场文书
贫困证明模板（3篇）
2014/09/16 职场文书
2014年标准化工作总结
2014/12/17 职场文书
介绍信的格式
2015/01/30 职场文书
公司2015年终工作总结
2015/05/26 职场文书
小学英语教学反思范文
2016/02/15 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server