我有5个输入字段，我希望它们在模糊时进行验证，并显示错误或成功消息，但要通过DOM脚本而不是带有警告框。我尝试了几种不同的代码，甚至只是一点点地看，看它是否与我的html正确交互，但似乎不起作用。到目前为止，我有一个小的代码可以测试它是否可以运行，并且应该显示一个警报框，但它不会。我宁愿不使用任何innerHTML并仅在javascript中使用所有函数。我的html：
<div id=fNID>
<label for="firstNameID">First Name: </label>
<input id="firstNameID" type="text" name="firstNameA" value="" />
<span> </span>
</div>
<div id=lNID>
<label for="lastNameID">Last Name: </label>
<input id="lastNameID" type="text" name="lastNameA" value="" />
<span> </span>
</div>
我的JavaScript：
firstNameID = document.surveyForm.getElementById("firstNameID");
document.surveyForm.getElementById(fN).addEventListener("blur", validateName);
function validateName() {
var nameRegEx = /[a-zA-Z]+/;
var firstNameID = document.getElementById("firstNameID");
if (fN.matches(nameRegEx)) {
alert("Success!")
} else {
alert("error")
}
}
window.addEventListener("load", setupForm, false);
}
Bootstrap对于input validation具有很好的模式。他们在输入之后使用div：一个用于有效输入，一个用于无效输入，从而使适当的一个可见：
<div class="form-group">
<label for="uname">Username:</label>
<input class="form-control" id="uname">
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
Bootstrap的CSS类根据输入的伪类:valid和:invalid修改显示。
您可以使用setCustomValidity（）方法在JavaScript中设置这些伪类。
input.setCustomValidity("input is invalid")
将:invalid伪类分配给输入。
input.setCustomValidity("")
将分配:valid伪类。
一个工作示例：
const input = document.getElementById('uname');
function makeValid() {
input.setCustomValidity('');
}
function makeInvalid() {
input.setCustomValidity('a problem');
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<h3 class="m-2">Bootstrap input with validation</h3>
<form class="was-validated mx-2">
<div class="form-group">
<label for="uname">Username (required):</label>
<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname">
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">This field is invalid.</div>
</div>
</form>
<div class="m-2">
<p>Use setCustomValidity() to change input state:</p>
<button onclick="makeValid();">:valid</button>
<button onclick="makeInvalid();">:invalid</button>
</div>值得注意的是，大多数浏览器都具有在输入中显示验证消息的本机支持。这是一个不使用任何Bootstrap功能的示例：
const input = document.getElementById('uname');
function makeValid() {
input.setCustomValidity('');
}
function makeInvalid() {
input.setCustomValidity('this is invalid');
}body {
background-color: #aaa;
}
.m-2 {
margin: .5rem;
}
.mt-5 {
margin-top: 1rem;
}<body>
<h3 class="m-2">Generic input with validation</h3>
<form class="mt-5">
<label for="uname">Username:</label>
<input type="text" id="uname" placeholder="Enter username" name="uname">
<p>Use setCustomValidity() to change input state:</p>
<button onclick="makeInvalid();">input:invalid</button>
</form>
<div class="m-2">
<button onclick="makeValid();">input:valid</button>
</div>
</body>