美观简洁的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%的人还看了以下文章

  • 第13课:浮动元素(float)

    我们可以通过CSS属性float令元素向左或向右浮动。也就是说,令盒子及其中的内容浮动到文档(或者是上层盒子)的右边或者左边(参见第9课关于盒状模型的描述)。下图阐明了其原理: 举个例子,假如我们想让一张图片被一段文字围绕着,那么其显示效果将如下所示: 如何实现这个效果? 上例的HTML代码如下所示: <div id=”picture”><…

    2020年2月25日
    2.3K0
  • 太赞了!推荐2个多彩渐变配色网站

    1、根据心情和情绪生成的渐变色 https://gradienmood.posandu.me/ 色彩是拥有情绪的,但是有情绪的色彩有不一定仅仅只有一种颜色。这个名为 Gradien Mood 的渐变色网站会将不同感觉和渐变色搜集起来,其中有的渐变色甚至拥有极为复杂的情绪,而你需要做的,就是输入你想传递的情绪,然后就能搜到相关的情绪和色彩,包括渐变的 CSS …

    2023年1月18日
    2.5K0
  • jQuery获取URL传递的参数

    URL传递参数是程序开发中经常用到的,中国网页设计给大家分享使用jQuery如何获取URL传递的参数。 例如要获取下面URL地址中的参数: http://www.125jz.com?id=”2020″&title=”jQuery获取URL传递的参数” 实现代码如下: //获取URL参数a和b funct…

    2018年9月30日
    2.3K0
  • vue学习v-on:click绑定HTML的单击事件

    v-on:click缩写为@click <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>125jz.com-vue</title> <script src=”js/vue.js” type=”text/ja…

    2020年6月14日
    3.4K0
  • div/span水平顶部对齐,同一行div跟内容最多的div高度保持一样高

    一、两个div水平顶部对齐 两个div都设置display:inline-block;  并且右边的div增加样式vertical-align: top; 使得右边的div跟左边的div的顶部对齐。 <div id=’left’ style=”width:20%; display:inline-block”> </div> <d…

    2018年12月10日
    8.0K0
  • HTML5画布(Canvas)速查表

    HTML5 <canvas> 标签用于绘制图像。<canvas> 元素本身仅仅是图形的容器,必须使用脚本来完成实际的绘图任务。HTML5 <canvas> 可用于在画布上绘制文本、线条、矩形、圆形等等。 HTML5画布(Canvas)元素 <canvas id=”myCanvas” width=”500″ heigh…

    2018年2月20日
    2.9K0

发表回复

登录后才能评论