实例首页
自学教程
IT工具箱
源代码
下载代码
左右布局
点击运行 >
<!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container"> <h2>表单验证</h2> <p>使用 .needs-validation，它将在表单提交之后验证缺少的内容。这里需要添加一些 js 代码才能使代码正常工作。</p> <p>可以点击提交按钮查看效果。</p> <form action="" class="needs-validation" novalidate> <div class="form-group"> <label for="uname">Username:</label> <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required> <div class="valid-feedback">验证成功！</div> <div class="invalid-feedback">请输入用户名！</div> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required> <div class="valid-feedback">验证成功！</div> <div class="invalid-feedback">请输入密码！</div> </div> <div class="form-group form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" name="remember" required> 同意协议 <div class="valid-feedback">验证成功！</div> <div class="invalid-feedback">同意协议才能提交。</div> </label> </div> <button type="submit" class="btn btn-primary">提交</button> </form> </div> <script> // 如果验证不通过禁止提交表单 (function() { 'use strict'; window.addEventListener('load', function() { // 获取表单验证样式 var forms = document.getElementsByClassName('needs-validation'); // 循环并禁止提交 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> </body> </html>
运行结果：