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

  • vue学习-我的第一个vue代码

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

    2020年6月14日
    4.3K0
  • CSS border-radius 深入学习(含可视化生成工具)

    没有学过CSS border-radius 的同学,请阅读《css实现圆角矩形、半圆、圆形效果—border-radius使用详解》一文。border-radius 写法: .box{ border-radius: 30%; /* 也可以用PX代替 */ } 矩形的四角会变为相应数值的圆角,如下图: 只输入一个数值,所有角都会被四舍五入,若要固定值可以使用 …

    2019年10月17日 网页制作
    3.2K0
  • Zoho Docs-在网页中嵌入PPT的最佳方案(个人版5G免费)

    Zoho WorkDrive – 全面的在线共享文档工具 在125建站网上想嵌入PPT,分享给大家 ,并且可以播放。 我思考了三种方法: 是在Zoho Docs上操作; 是PPT以图片的形式保存(动画效果没有了),直接轮播; 是自己手写动画+轮播,达到PPT播放效果(用express.js来实现)比较复杂,并且对小白站长不适用。 很自信的要自己手…

    2023年1月16日 网页制作
    8960
  • 网页制作常用正则表达式大全、正则表达式在线测试工具

    正则表达式,用一段非常简短的表达式语句,便能够快速实现一个非常复杂的业务逻辑。正则表达式经常被用于字段或任意字符串的校验。熟练地掌握正则表达式的话,能够使你的开发效率得到极大的提升。 正则表达式在线测试工具 regex101是一个非常不错的正则表达式在线测试工具,你可以直接在线测试你的正则表达式。 网页制作常用正则表达式 1 用户名正则 //用户名正则,4到…

    2018年9月12日
    3.8K0
  • 跟永哥学HTML5(5):正确使用HTML5的nav和figure

    这节课就给大家讲解常见的HTML5标签错误使用写法,帮助大家理解并学会正确使用HTML5的nav和figure。 1、不要把所有列表式的链接放在nav里 随着HTML5引入了 30个新元素,我们在构造语义化和结构化的标签时的选择也变得有些不慎重。也就是说,我们不应该滥用超语义化的元素。不幸的是,nav就是这样一个被滥用的例子。 nav元素的规范描述如下: n…

    2018年2月3日
    2.7K0
  • js验证表单验证,包括用户名、密码、确认密码等,用户注册页面实例

      本文是js验证表单输入的入门级教程,要求你会基础的HTML,JS知识。 页面HTML 表单代码: <form action=”” method=”post” enctype=”multipart/form-data” name=”reg_form”> <div class=”info_input”> <div cl…

    2019年9月5日
    6.1K0

发表回复

登录后才能评论