Bootstrap4搞一波登录
今天突发奇想想用bootstrap4搞一波登录
一直在被bootstrapValidator与bootstrap的版本兼容问题所纠结,主要是现在习惯了bootstrap4的风格。
现在的bootstrapValidator一直使用的是bootstrap3貌似,用4的话基本上很难受。
日常划水去搞了一波bootstrap4的验证,感觉海星,废话不多说,直接上代码。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrapValidator.css"/>
<link rel="stylesheet" href="css/index.css" />
<!--script代码行-->
<!--jquery-->
<script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
<!--bootstrap-->
<script type="text/javascript" src="js/bootstrap.js" ></script>
<!--bootstrapValidator.js 修改过后的,后期会发一下-->
<script type="text/javascript" src="js/bootstrapValidator.js" ></script>
</head>
<body>
<div class="text-center logo">
<img src="img/bootstrap-solid.svg" class="rounded mx-auto d-block" alt="bootstrap" style="width: 100px;">
</div>
<div class="text-center title">
<h1>登录</h1>
</div>
<form id="loginform">
<div class="form-group row justify-content-center ">
<label for="username" class="float-right col-sm-2 col-form-label control-label text-right">用户名:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" />
</div>
</div>
<div class="form-group row justify-content-center ">
<label for="password" class="float-right col-sm-2 col-form-label text-right">密码:</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" />
</div>
</div>
<div class="form-group row justify-content-center">
<button type="submit" class="btn btn-success">登录</button>
</div>
</form>
<script type="application/javascript">
$("#loginform").bootstrapValidator({
excluded:[":disabled"],
live: 'enabled',
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields:{
username:{
validators: {
notEmpty: {
message: '用户名不能位空'
},
stringLength: {
min: 6,
max: 30,
message: '用户名必须大于6,小于30个字'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '用户名只能由字母、数字、点和下划线组成'
}
}
},
password: {
validators:{
notEmpty:{
message: '密码不能为空',
},
stringLength:{
min: 6,
max: 12,
message: '密码不能大于12位小于6位'
}
}
}
}
});
</script>
</body>
</html>
基本样式也就是这样,主要是bootstrap4官方文档看起来舒服一点。 主要还是感谢gitee上的萨法客户的帅哥
bootstrapValidator.js链接link.