如何在javascript中检查输入是假还是真

Question

我想看看是否所有的输入字段都为true，如果不添加一个类"false"；以及输入字段周围的边界。如何检查所有输入是否为真？现在我只得到一个边界，即使它的两个字段是错误的。如果姓氏和年龄是错误的，我想在输入周围添加一个红色边框。

function inputCount() {
var formPets = document.getElementsByTagName("input");
var firstName = document.getElementsByName("firstname")[0].value;
var lastName = document.getElementsByName("lastname")[0].value;
var age = document.getElementsByName("age")[0].value;
var email = document.getElementsByName("email")[0].value;
for (var i = 0; i < formPets.length; i++) {
if(firstName.value == "" || !isNaN(firstName) || firstName.length > 50)
{
alert("False");
var firstNameFalse = document.getElementById("firstname");
firstNameFalse.classList.add("false");
return false;
} 
else if (lastName.value == "" || !isNaN(lastName) || lastName.length > 50){
alert("False");
var lastNameFalse = document.getElementById("lastname");
lastNameFalse.classList.add("false");
return false;
}
else if (age.value == "" || isNaN(age) || age.length > 0){
alert("False");
var ageFalse = document.getElementById("age");
ageFalse.classList.add("false");
return false;
}
else if (email.value == "" || !isNaN(email) || email.length > 50){
alert("False");
var emailFalse = document.getElementById("email");
emailFalse.classList.add("false");
return false;
}
else {
alert("OK");
}
}
}

#firstname.false {
border-color: red !important;
}
#lastname.false {
border-color: red !important;
}
#age.false {
border-color: red !important;
}
#email.false {
border-color: red !important;
}

<input type="text" name="firstname" id="firstname">Firstname<br>
<input type="text" name="lastname" id="lastname"> Lastname<br>
<input type="text" name="age" id="age"> Age<br>
<input type="text" name="email" id="email"> Email<br>
<button type="submit" onclick="inputCount()">Submit</button>

Answer 1

我不确定我是否正确理解了你的问题，但如果我理解了，我认为你只需要将else if更改为if，并删除return语句：

<script type="text/javascript">
function inputCount() {
var formPets = document.getElementsByTagName("input");
var firstName = document.getElementsByName("firstname")[0].value;
var lastName = document.getElementsByName("lastname")[0].value;
var age = document.getElementsByName("age")[0].value;
if (firstName.value == "" || !isNaN(firstName) || firstName.length > 50) {
var firstNameFalse = document.getElementById("firstname");
firstNameFalse.classList.add("false");
}
if (lastName.value == "" || !isNaN(lastName) || lastName.length > 50) {
var lastNameFalse = document.getElementById("lastname");
lastNameFalse.classList.add("false");
}
if (age.value == "" || isNaN(age) || age.length > 0) {
var ageFalse = document.getElementById("age");
ageFalse.classList.add("false");
}
if (email.value == "" || !isNaN(email) || email.length > 50) {
var emailFalse = document.getElementById("email");
emailFalse.classList.add("false");
}
}
</script>
<style>
#firstname.false {
border-color: red !important;
}
#lastname.false {
border-color: red !important;
}
#age.false {
border-color: red !important;
}
#email.false {
border-color: red !important;
}
</style>
<input type="text" name="firstname" id="firstname" />Firstname<br />
<input type="text" name="lastname" id="lastname" /> Lastname<br />
<input type="text" name="age" id="age" /> Age<br />
<input type="text" name="email" id="email" /> Email<br />
<button type="submit" onclick="inputCount()">Submit</button>

我还删除了无用的for循环。

Answer 2

发布

• 无需使用循环
• 收集所有输入并检查其有效性
• 如果false类无效，则添加该类
• 删除类false(如果有效)

function inputCount() {
var formPets = document.getElementsByTagName("input");
var firstName = document.getElementsByName("firstname")[0].value;
var lastName = document.getElementsByName("lastname")[0].value;
var age = document.getElementsByName("age")[0].value;
var email = document.getElementsByName("email")[0].value;
var firstNameFalse = document.getElementById("firstname");
if (firstName.value == "" || !isNaN(firstName) || firstName.length > 50) {
console.log("False");
firstNameFalse.classList.add("false");
// return false;
} else {
firstNameFalse.classList.remove("false");
}
var lastNameFalse = document.getElementById("lastname");
if (lastName.value == "" || !isNaN(lastName) || lastName.length > 50) {
console.log("False");
lastNameFalse.classList.add("false");
// return false;
} else {
lastNameFalse.classList.remove("false");
}
var ageFalse = document.getElementById("age");
if (age.value == "" || isNaN(age.value)) {
console.log("False");
ageFalse.classList.add("false");
// return false;
} else {
ageFalse.classList.remove("false");
}
var emailFalse = document.getElementById("email");
if (email.value == "" || !isNaN(email) || email.length > 50) {
console.log("False");
emailFalse.classList.add("false");
// return false;
} else {
emailFalse.classList.remove("false");
}
}

#firstname.false {
border-color: red !important;
}
#lastname.false {
border-color: red !important;
}
#age.false {
border-color: red !important;
}
#email.false {
border-color: red !important;
}

<input type="text" name="firstname" id="firstname">Firstname<br>
<input type="text" name="lastname" id="lastname"> Lastname<br>
<input type="text" name="age" id="age"> Age<br>
<input type="text" name="email" id="email"> Email<br>
<button type="submit" onclick="inputCount()">Submit</button>

If还可以使用查询选择器document.querySelectorAll选择所有输入，并检查每个输入是否有效，如下所述。

function inputCount() {
const inputs = document.querySelectorAll('input');
inputs.forEach((input) => {
if (
(input.id !== "age" && (input.value == "" || input.value.length > 50 || !isNaN(input.value))) ||
(input.id === "age" && (input.value == "" || isNaN(input.value)))
)  {
input.classList.add("false");
} else {
input.classList.remove("false");
}
})
}

.false {
border-color: red;
}

<input type="text" name="firstname" id="firstname">Firstname<br>
<input type="text" name="lastname" id="lastname"> Lastname<br>
<input type="text" name="age" id="age"> Age<br>
<input type="text" name="email" id="email"> Email<br>
<button type="submit" onclick="inputCount()">Submit</button>

Answer 3

您可以将代码简称为

function validateEmail(email) {
const re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
const addErrorClass = element => element.classList.add("false");
const removeErrorClass = element => element.classList.remove("false");
function inputCount() {
const formPets = Array.from(document.getElementsByTagName("input"));
formPets.forEach(element => {
const value = element.value.trim();
const elementName = element.name;
if (elementName === "age")(value === "" || isNaN(value)) ? addErrorClass(element) : removeErrorClass(element);
else if (elementName === "email")(value === "" || !isNaN(value) || !validateEmail(value)) ? addErrorClass(element) : removeErrorClass(element);
else(value === "" || !isNaN(value) || value.length > 50) ? addErrorClass(element) : removeErrorClass(element);
});
}

<input type="text" type="text" name="firstname" id="firstname">Firstname<br>
<input type="text" type="text" name="lastname" id="lastname"> Lastname<br>
<input type="text" type="number" name="age" id="age"> Age<br>
<input type="text" type="email" name="email" id="email"> Email<br>
<button type="submit" onclick="inputCount()">Submit</button>