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

这个登陆窗口是双登陆窗口的，对IE8及早期版本不支持，可以根据自己的开发语言更换，我这个是asp的，其中的引用文件可以在网络上自行下载，如找不到可以留下邮箱~！

关键代码如下所示：

<!DOCTYPE html>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>scm登陆界面</title>
<styletype="text/css">
body {
background-color:#999;
}
</style>
<linkrel="stylesheet"href="../bootstrap335/css/bootstrap.min.css">
<linkrel="stylesheet"href="../bootstrap335/css/bootstrapValidator.min.css">
<scriptsrc="../bootstrap335/js/jquery-2.1.4.min.js"></script>
<scriptsrc="../bootstrap335/js/bootstrap.min.js"></script>
<scriptsrc="../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">
</ul>
</div>
</div>
</nav>-->
<divclass="col-lg-5 col-lg-offset-2">
<divclass="page-header"style="margin-top:5em;">
<h2>******管理系统</h2>
</div>
</div>
<divclass="col-md-offset-4 col-md-4">
<divclass="panel panel-primary"style="margin-top:3em;">
<ulid="myTab"class="nav nav-tabs">
<liclass="active"><ahref="#Prv"data-toggle="tab">供应商登陆</a></li>
<li><ahref="#CPrv"data-toggle="tab">生产商登陆</a></li>
</ul>
<divid="myTabContent"class="tab-content">
<divclass="tab-pane fade in active"id="Prv">
<divclass="well well-sm "><h3class="panel-title">
供应商登陆</h3>
</div>
<divclass="panel-body">
<formname="LoginG"id="LoginG"action="Admin_ChkLogin_G.asp"method="post"target="_parent">
<divclass="form-group">
<divclass="input-group">
<spanclass="input-group-addon">账号</span>
<inputname="Username"type="text"class="form-control"placeholder="Username">
</div><br/>
</div>
<divclass="form-group">
<divclass="input-group">
<spanclass="input-group-addon">密码</span>
<inputname="Password"type="Password"class="form-control"placeholder="Password">
</div>
</div>
<h5>请将如下计算结果填入文本框内：</h5>
<divclass="form-group form-horizontal">
<labelclass="col-lg-3 control-label "id="captchaOperation"></label>
<divclass="col-lg-9">
<inputtype="text"class="form-control "name="captcha"/>
</div>
</div><br/><br/><br/>
<divclass="form-group">
<inputclass="btn btn-primary btn-block"type="submit"value="登　　录"/>
</div>
</form>
</div>
</div>
<divclass="tab-pane fade"id="CPrv">
<divclass="well well-sm"><h3class="panel-title">
生产商登陆</h3>
</div>
<divclass="panel-body">
<formname="LoginS"id="LoginS"action="Admin_ChkLogin_S.asp"method="post"target="_parent">
<divclass="form-group">
<divclass="input-group">
<spanclass="input-group-addon">账号</span>
<inputname="Username2"type="text"class="form-control"placeholder="Username">
</div><br/>
</div>
<divclass="form-group">
<divclass="input-group">
<spanclass="input-group-addon">密码</span>
<inputname="Password2"type="Password"class="form-control"placeholder="Password">
</div>
</div>
<h5>请将如下计算结果填入文本框内：</h5>
<divclass="form-group form-horizontal">
<labelclass="col-lg-3 control-label "id="captchaOperation2"></label>
<divclass="col-lg-9">
<inputtype="text"class="form-control "name="captcha2"/>
</div>
</div><br/><br/><br/>
<divclass="form-group">
<inputclass="btn btn-primary btn-block"type="submit"value="登　　录"/>
</div>
</form>
</div>
</div>
</div>
</div>
<scripttype="text/javascript">
$(document).ready(function(){
// Generate a simple captcha
function randomNumber(min, max){
returnMath.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>
<scripttype="text/javascript">
$(document).ready(function(){
// Generate a simple captcha
function randomNumber(min, max){
returnMath.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实现登录校验表单(带验证码)

猜你喜欢