一、引用的文件
<link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">
<link href="signin.css" rel="stylesheet">
<script src="jquery-3.2.1.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
二、html完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標籤*必須*放在最前面,任何其他內容都*必須*跟隨其後! -->
<meta name="description" content="">
<meta name="author" content="">
<title>Signin Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="signin.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="jquery-3.2.1.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<form class="form-signin" id="LoginG" >
<h2 class="form-signin-heading">Please sign in</h2>
<div class="form-group">
<label for="username" class="sr-only">Username</label>
<input type="text" id="username" name="username" class="form-control" placeholder="Username"/>
</div>
<div class="form-group">
<label for="password" class="sr-only">Password</label>
<input type="password" id="password" name="password" class="form-control" placeholder="Password" />
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div> <!-- /container -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script type="text/javascript">
$(function () {
$('#LoginG').bootstrapValidator({
//message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
message: '用戶名驗證失敗',
validators: {
notEmpty: {
message: '用戶名不能爲空'
},
stringLength: {
min: 6,
max: 18,
message: '用戶名長度必須在6到18位之間'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: '用戶名只能包含大寫、小寫、數字和下劃線'
}
}
},
password: {
validators: {
notEmpty: {
message: '密碼不能爲空'
}
}
}
}
}).on('success.form.bv', function(e) {//點擊提交之後
alert("驗證成功登陸跳轉。。。");
return;
// Use Ajax to submit form data 提交至form標籤中的action,result自定義
$.post("", "", function(result) {
//do something...
});
});
});
</script>
</body>
</html>
三、signin.css完成代碼
body {
background: url(4.jpg) no-repeat;
background-size:cover;
padding-top: 40px;
padding-bottom: 40px;
background-color: #eee;
}
.form-signin {
max-width: 430px;
padding: 50px;
margin: 0 auto;
background: rgba(255,255,255,0.2);
}
.form-signin .form-signin-heading,
.form-signin {
margin-bottom: 10px;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .form-control {
position: relative;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="text"] {
margin-bottom: 0px;
}
.form-signin input[type="password"] {
margin-bottom: 0px;
}
.checkbox {
margin-bottom: 10px;
margin-top: 0px;
}
.glyphicon{
margin-top: 5px;
}
四、瀏覽器控制檯報Uncaught RangeError: Maximum call stack size exceeded處理辦法:
是否加入:<div class="form-group"></div>
bootstrap,bootstrapValidator實現登陸頁面及輸入校驗
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.