美观简洁的bootstrap 表单验证代码，如上图所示，点击登录按钮，在输入框下方显示错误提示信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ipput</title>
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="css/fontawesome.min.css" /> -->
<!-- 移动优先 -->
<meta name="viewport" content="width=device-with, initial-scale=1,shrink-to-fit=no" />
</head>
<body>
<div class="container" >
<form novalidate="" class=" needs-validation">
<div class="class=" form-group">
<label>邮箱</label>
<input type="text" class=" form-control" required />
<!-- <small class="form-text text-muted">请输入邮箱</samll>-->
<div class=" invalid-feedback">请输入邮箱！</div>
</div>
<div class=" form-group">
<label class=" ">密码</label>
<input type="password" class="form-control" required="required" />
<div class=" invalid-feedback">请输入密码！</div>
</div>
<div class="form-check">
<input type="checkbox" class=" form-check-input" />
<label class="form-check-label">同意</label>
</div>
<button class="btn btn-primary">登录</button>
</form>
</div>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="./js/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="js/bootstrap.bundle.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/4770.html
微信扫一扫 
支付宝扫一扫