我的代码有问题，我真的不知道如何纠正它。验证效果很好，但问题是当你填写一个名称输入字段例如 - dima，那么你选择手机的字段，但名字的字段仍然没有你的任何东西可以看到你正确地填写它，你必须再次选择这个字段，而不是它添加一些类到该字段。我该如何解决这个问题？
<form name="myform>
<input type="text" name="firstname" placeholder="First Name" maxlength="30">
<p id="nameError">First name is required</p>
<p id="nameErrorTwo">Enter only characters</p>
<input type="tel" name="phone" placeholder="Phone Number">
<p id="telError">Phone is required</p>
<p id="telErrorTwo">Enter a number</p>
</form>
// firstname
document.myform.firstname.onblur= function() {
var name = document.myform.firstname.value;
if (name === "") {
document.myform.firstname.removeAttribute("class", "ready");
document.myform.firstname.style.border = "1px solid #da3637";
document.getElementById("nameError").style.display = "block";
document.getElementById("nameErrorTwo").style.display = "none";
} else {
//firstname onchange
document.myform.firstname.onchange= function() {
document.myform.firstname.style.border = "1px solid #509d12";
document.getElementById("nameError").style.display = "none";
document.myform.firstname.setAttribute("class", "ready");
var pattern = new RegExp("\[a-z]+", "i");
var isValid = this.value.search(pattern) >= 0;
if (!(isValid)) {
document.myform.firstname.style.border = "1px solid #da3637";
document.getElementById("nameErrorTwo").style.display = "block";
} else {
document.getElementById("nameErrorTwo").style.display = "none";
document.myform.firstname.style.border = "1px solid #509d12";
}
};
}
};
//phone
document.myform.phone.onblur= function() {
var name = document.myform.phone.value;
if (name === "") {
document.myform.phone.removeAttribute("class", "ready");
document.myform.phone.style.border = "1px solid #da3637";
document.getElementById("telError").style.display = "block";
document.getElementById("telErrorTwo").style.display = "none";
} else {
//phone onchange
document.myform.phone.onchange= function() {
document.myform.phone.style.border = "1px solid #509d12";
document.getElementById("telError").style.display = "none";
document.myform.phone.setAttribute("class", "ready");
var pattern = new RegExp("\\d", "i");
var isValid = this.value.search(pattern) >= 0;
if (!(isValid)) {
document.myform.phone.style.border = "1px solid #da3637";
document.getElementById("telErrorTwo").style.display = "block";
} else {
document.getElementById("telErrorTwo").style.display = "none";
document.myform.phone.style.border = "1px solid #509d12";
}
};
}
};
答案 0 :(得分：1)
在原始代码中，仅当字段失去焦点且非空值时，才会设置onchange()事件侦听器。这解释了您遇到的奇怪行为。
实际上，我没有理由使用onblur()和onchange()混合。
请查看以下版本是否正在执行您期望的操作。它只使用onchange()。
// firstname
document.myform.firstname.onchange= function() {
var name = document.myform.firstname.value;
if (name === "") {
document.myform.firstname.removeAttribute("class", "ready");
document.myform.firstname.style.border = "1px solid #da3637";
document.getElementById("nameError").style.display = "block";
document.getElementById("nameErrorTwo").style.display = "none";
} else {
document.getElementById("nameError").style.display = "none";
document.myform.firstname.setAttribute("class", "ready");
var pattern = new RegExp("^[a-z]+$", "i");
var isValid = this.value.search(pattern) >= 0;
if (!(isValid)) {
document.myform.firstname.style.border = "1px solid #da3637";
document.getElementById("nameErrorTwo").style.display = "block";
} else {
document.getElementById("nameErrorTwo").style.display = "none";
document.myform.firstname.style.border = "1px solid #509d12";
}
}
};
//phone
document.myform.phone.onchange= function() {
var name = document.myform.phone.value;
if (name === "") {
document.myform.phone.removeAttribute("class", "ready");
document.myform.phone.style.border = "1px solid #da3637";
document.getElementById("telError").style.display = "block";
document.getElementById("telErrorTwo").style.display = "none";
} else {
//phone onchange
document.getElementById("telError").style.display = "none";
document.myform.phone.setAttribute("class", "ready");
var pattern = new RegExp("^\\d+$");
var isValid = this.value.search(pattern) >= 0;
if (!(isValid)) {
document.myform.phone.style.border = "1px solid #da3637";
document.getElementById("telErrorTwo").style.display = "block";
} else {
document.getElementById("telErrorTwo").style.display = "none";
document.myform.phone.style.border = "1px solid #509d12";
}
}
};<form name="myform">
<div>
<input type="text" name="firstname" placeholder="First Name" maxlength="30">
<p id="nameError">First name is required</p>
<p id="nameErrorTwo">Enter only characters</p>
</div>
<div>
<input type="tel" name="phone" placeholder="Phone Number">
<p id="telError">Phone is required</p>
<p id="telErrorTwo">Enter a number</p>
</div>
</form>
答案 1 :(得分：0)
相反，要使用onchange，你可以使用oninput控制char之后的char，或者onblur在你失去焦点时进行测试。
function setFieldValidity(element, pattern) {
var isValid = element.value === '' || element.value.search(pattern) >= 0;
if (!isValid) {
element.removeAttribute("class", "ready");
element.style.border = "1px solid #da3637";
document.getElementById("nameError").style.display = "block";
document.getElementById("nameErrorTwo").style.display = "none";
} else {
element.setAttribute("class", "ready");
element.style.border = "1px solid #509d12";
document.getElementById("nameError").style.display = "none";
document.getElementById("nameErrorTwo").style.display = "block";
}
}
window.addEventListener('DOMContentLoaded', function(e) {
//firstname
document.myform.firstname.oninput = function(e) {
setFieldValidity(this, new RegExp("\[a-z]+$", "i"));
};
//phone
document.myform.phone.oninput = function(e) {
setFieldValidity(this, new RegExp("^\\d+$", "i"));
};
}, false);<form name="myform">
<input type="text" name="firstname" placeholder="First Name" maxlength="30">
<p id="nameError">First name is required</p>
<p id="nameErrorTwo">Enter only characters</p>
<input type="tel" name="phone" placeholder="Phone Number">
<p id="telError">Phone is required</p>
<p id="telErrorTwo">Enter a number</p>
</form>