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

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

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

(0)
上一篇 2020年2月8日 上午10:40
下一篇 2020年2月10日 下午9:13

99%的人还看了以下文章

  • CSS制作三角形原理—超简单

    网页制作中我们经常会需要三角形图标,例如内容展开收起、左右箭头点击切换轮播,点击某条列表数据查看详情等。 三角形图标应用范围广,我们有必要了解一下它的实现原理。 1) 一个最基础的边框效果 .content { width: 50px; height: 50px; border: 2px solid; border-color:#ff9600 #3366ff…

    2019年11月26日 网页制作
    2.1K0
  • css布局基础-盒子模型

    网页设计的第一步就是设计版面布局,本文介绍了css布局基础-盒子模型,CSS盒模型是描述网页布局的视觉模型中网页元素的矩形盒状模型。盒模型由margin(边界)、border(边框)、padding(填充)和content(内容)4部分组成。

    2022年7月14日
    1560
  • vue学习-我的第一个vue代码

    创建一个 .html 文件,然后通过如下方式引入 Vue: <!– 开发环境版本,包含了有帮助的命令行警告 –> <script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script> 或者: <!– 生产环境版本,优化了尺寸和速度 –>…

    2020年6月14日
    1.9K0
  • 第15课:用z-index进行层次堆叠

    CSS可以处理高度、宽度、深度三个维度。在前面的课程中,我们已经了解了前两个维度。在本课中,我们将学习如何令不同元素具有层次。简言之,就是关于元素堆叠的次序问题。 为此,你可以为每个元素指定一个数字(z-index)。其原理是:数字较大的元素将叠加在数字较小的元素之上。 比方说,我们正在打扑克,并且拿了一手同花大顺。我们可以通过为各张牌设定一个z-index…

    2020年2月25日
    1.6K0
  • jquery全选和反选功能代码,兼容所有浏览器

    <!doctype html> <html> <head> <meta charset=”utf-8″> <title>jquery全选和反选功能代码,兼容所有浏览器|www.125jz.com</title> <script type=”text/javascript” src=…

    2019年11月1日
    1.5K0
  • 实现网页全屏和退出全屏JS代码,多浏览器兼容

    实现网页全屏和退出全屏JS代码,兼容主流浏览器如:谷歌、火狐、360等。   <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <t…

    2019年2月15日
    2.7K0

发表回复

登录后才能评论