免費(fèi)AI編程助手
Bootstrap5 表單驗(yàn)證
2023-07-12 16:12 更新
我們可以使用不同的驗(yàn)證類來設(shè)置表單的驗(yàn)證功能。
.was-validated 或 .needs-validation 添加到 <form> 元素中，input 輸入字段將具有綠色（有效）或紅色（無效）邊框效果，用于說明表單是否需要輸入內(nèi)容。
.valid-feedback 或 .invalid-feedback 類用來告訴用戶缺少什么信息，或者在提交表單之前需要完成什么。
實(shí)例
使用 .was-validated 類顯示表單在提交之前需要填寫的內(nèi)容：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 實(shí)例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container">
<h2>表單驗(yàn)證</h2>
<p>使用 .was-validated 類顯示表單在提交之前需要填寫的內(nèi)容：</p>
<form action="" class="was-validated">
<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">驗(yàn)證成功！</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">驗(yàn)證成功！</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> 同意協(xié)議
<div class="valid-feedback">驗(yàn)證成功！</div>
<div class="invalid-feedback">同意協(xié)議才能提交。</div>
</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</div>
</body>
</html>實(shí)例
使用 .needs-validation，它將在表單提交之后驗(yàn)證缺少的內(nèi)容。這里需要添加一些 JavaScript 代碼才能使代碼正常工作：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 實(shí)例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container">
<h2>表單驗(yàn)證</h2>
<p>使用 .needs-validation，它將在表單提交之后驗(yàn)證缺少的內(nèi)容。這里需要添加一些 js 代碼才能使代碼正常工作。</p>
<p>可以點(diǎn)擊提交按鈕查看效果。</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">驗(yàn)證成功！</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">驗(yàn)證成功！</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> 同意協(xié)議
<div class="valid-feedback">驗(yàn)證成功！</div>
<div class="invalid-feedback">同意協(xié)議才能提交。</div>
</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</div>
<script>
// 如果驗(yàn)證不通過禁止提交表單
(function() {
'use strict';
window.addEventListener('load', function() {
// 獲取表單驗(yàn)證樣式
var forms = document.getElementsByClassName('needs-validation');
// 循環(huán)并禁止提交
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>以上內(nèi)容是否對您有幫助：
更多建議：