美观简洁的bootstrap 表单验证代码

江山如画 • 2020年2月9日下午4:18 • 网页制作 • 阅读 11719

美观简洁的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