我正在尝试第一次在服务器端验证引导程序表单,我不太了解何时使用is-valid和is-invalid类。另外,在文档中,我仍然不清楚是否应该使用脚本,因为“服务器端”部分的代码中没有显示该脚本。
在测试文档代码时,我觉得很奇怪,您可以在有效的文本字段中提交一个空文本,并且仍然显示“ Looks Good”。
我要验证的表单是此表单的较大版本。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<form>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationServer01">First name</label>
<input type="text" class="form-control is-valid " id="validationServer01" placeholder="First name" value="Mark" required>
<div class="invalid-feedback">
Crap!
</div>
<div class="valid-feedback">
Looking good
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<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>
还可以在不显示标准浏览器验证的情况下执行任何操作吗?