Bootstrap實(shí)現(xiàn)登錄校驗(yàn)表單(帶驗(yàn)證碼)
更新時(shí)間：2016年06月23日 10:43:05 作者：80s八零年代
本文給大家介紹使用Bootstrap新制作的一個(gè)登錄框，帶驗(yàn)證碼，帶校驗(yàn)，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友可以參考下
這個(gè)登陸窗口是雙登陸窗口的，對IE8及早期版本不支持，可以根據(jù)自己的開發(fā)語言更換，我這個(gè)是asp的，其中的引用文件可以在網(wǎng)絡(luò)上自行下載，如找不到可以留下郵箱~！
關(guān)鍵代碼如下所示：
<!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=".">******系統(tǒng) (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 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>******管理系統(tǒng)</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">供應(yīng)商登陸</a></li>
<li><a href="#CPrv" data-toggle="tab">生產(chǎn)商登陸</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">
供應(yīng)商登陸</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>請將如下計(jì)算結(jié)果填入文本框內(nèi)：</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">
生產(chǎn)商登陸</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>請將如下計(jì)算結(jié)果填入文本框內(nèi)：</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: '只接受數(shù)字和字母 '
}
}
},
Password: {
validators: {
notEmpty: {
message: '密碼不能為空'
}
}
},
captcha: {
validators: {
callback: {
message: '驗(yàn)證碼錯(cuò)誤',
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: '只接受數(shù)字和字母 '
}
}
},
Password2: {
validators: {
notEmpty: {
message: '密碼不能為空'
}
}
},
captcha2: {
validators: {
callback: {
message: '驗(yàn)證碼錯(cuò)誤',
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實(shí)現(xiàn)用戶登錄界面UI
- jfinal與bootstrap的登錄跳轉(zhuǎn)實(shí)戰(zhàn)演習(xí)
- php bootstrap實(shí)現(xiàn)簡單登錄
- 分享Bootstrap簡單表格、表單、登錄頁面
- Bootstrap彈出帶合法性檢查的登錄框?qū)嵗a【推薦】
- bootstrap flask登錄頁面編寫實(shí)例
- PHP實(shí)現(xiàn)登錄注冊之BootStrap表單功能
- 基于Bootstrap實(shí)現(xiàn)下拉菜單項(xiàng)和表單導(dǎo)航條(兩個(gè)菜單項(xiàng)，一個(gè)下拉菜單和登錄表單導(dǎo)航條)
- Bootstrap中文本框的寬度變窄并且加入一副驗(yàn)證碼圖片的實(shí)現(xiàn)方法
- Bootstrap實(shí)現(xiàn)前端登錄頁面帶驗(yàn)證碼功能完整示例
相關(guān)文章
javasript實(shí)現(xiàn)密碼的隱藏與顯示
用戶輸入密碼時(shí)都是顯示的星號了，那么我們希望查看明文要怎么查看呢，下面我們只要使用一段簡單的js就可以實(shí)現(xiàn)查看密碼框的明文了，有需要的小伙伴可以來參考下。2015-05-05
javascript 瀏覽器類型和版本號檢測代碼(兼容多瀏覽器)
果對javascript了解不是特別深入的話,很容易就會(huì)寫出不兼容的代碼(就像我),這時(shí)候就得判斷瀏覽器了。比如事件偵聽、一些鼠標(biāo)和鍵盤事件、Range等,一些都會(huì)不一樣.下面列出幾種常用的檢測瀏覽器方法，以饗觀眾!2010-04-04
JS+CSS實(shí)現(xiàn)網(wǎng)頁加載中的動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了JS+CSS實(shí)現(xiàn)網(wǎng)頁加載中的動(dòng)畫效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了JavaScript自定義函數(shù)的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
JavaScript中如何讓?x?==?1?&&?x?==?2?&&?x?==?3?等式成立
這篇文章主要介紹了JavaScript中如何讓x==1&&x==2&&x==3等式成立，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07
原生JS實(shí)現(xiàn)列表內(nèi)容自動(dòng)向上滾動(dòng)效果
這篇文章主要介紹了原生JS實(shí)現(xiàn)列表內(nèi)容自動(dòng)向上滾動(dòng)效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
GWT中復(fù)制到剪貼板 js+flash實(shí)現(xiàn)復(fù)制 兼容性比較好
今天看到有個(gè)Google Code的項(xiàng)目，叫ZeroClipboard，大意是使用flash作為媒介，將內(nèi)容復(fù)制到剪貼板。這比用純javascript好，因?yàn)椴煌瑸g覽器會(huì)出于安全的原因，有不同反應(yīng)，例如IE會(huì)給出提示，有的瀏覽器不支持復(fù)制到剪貼板。2010-03-03
網(wǎng)絡(luò)圖片延遲加載實(shí)現(xiàn)代碼 超越j(luò)query控件
原理是分段加載圖片，主要用于大型網(wǎng)站節(jié)省帶寬，可是他們提供的東西壓縮混淆看不清，還有的要基于什么雅虎的什么庫，總之是很麻煩的，JQ的控件倒是夠清晰了，只是還是沒有達(dá)到節(jié)省網(wǎng)絡(luò)帶寬的效果2010-03-03
Bootstrap樹形菜單插件TreeView.js使用方法詳解
這篇文章主要為大家詳細(xì)介紹了Bootstrap樹形菜單插件TreeView.js使用方法,一款非?？岬幕赽ootstrap的jQuery多級列表樹插件，具有一定的實(shí)用性，感興趣的小伙伴們可以參考一下2016-11-11
對表格的行和列都能加亮顯示，而且點(diǎn)擊單元格后會(huì)有更不同的表現(xiàn)...2008-12-12