删除跨度标签背景颜色
我有一个项目，我需要创建一个表单来验证每个输入，如果出现错误，它将显示消息。如果没有错误，则不会显示任何消息。
我已经做到了，但每次没有错误时，我似乎无法删除span标签的红色背景。
在cleanUpErrors()我尝试使用indicator[i].remove();但indicator[i].setAttribute("class", "hide");它们都不起作用。
一旦没有错误消息，就不应该有任何红色背景。
window.onload = function () {
let theForm = document.getElementById("form");
theForm.addEventListener("submit", function (event) {
let stopSubmit = false;
cleanUpErrors();
if (!checkFirstName(theForm[0])) {
theForm[0].style.borderColor = "#990000";
stopSubmit = true;
}
if (!checkLastName(theForm[1])) {
theForm[1].style.borderColor = "#990000";
stopSubmit = true;
}
if (!checkEmail(theForm[2])) {
theForm[2].style.borderColor = "#990000";
stopSubmit = true;
}
if (!checkPhone(theForm[3])) {
theForm[3].style.borderColor = "#990000";
stopSubmit = true;
}
if (stopSubmit) {
event.preventDefault();
}
}, false)
}
function checkFirstName(input) {
let inputValue = input.value, errorMessage = "", letters = /^[a-zA-Z]+$/, characters = /^[a-zA-Z0-9!@#\$%\^\&*\)\(+=._-]+$/g;
if (inputValue === null || inputValue === "") {
errorMessage = "This field is empty.";
}
if (inputValue !== "") {
if (inputValue.length < 3) {
errorMessage = "This field has less than 3 characters.";
}
if(!inputValue.match(letters)){
errorMessage = "Numbers detected. Please write your first name.";
}
if(!inputValue.match(characters)){
errorMessage = "Special characters detected. Please write your first name.";
}
}
renderErrorMessage(input, errorMessage);
return errorMessage === "";
}
不负相思意浏览 89回答 2
2回答
-
慕尼黑的夜晚无繁华
有很多代码重复。不同字段的多个验证函数具有共同的代码，只是函数名称发生变化。相反，您可以创建一个函数数组 i:econst validationFunctions = [checkFirstName, checkLastName, checkEmail, checkPhone];然后调用应用循环的函数。仅当满足条件时， withspan类error才会被删除。requiredconst validationFunctions = [checkFirstName, checkLastName, checkEmail, checkPhone];validationFunctions.forEach((fun, i) => { if(!fun(theForm[i])) { theForm[i].style.borderColor = "#990000"; stopSubmit = true; } else { document.querySelector(`#${theForm[i].id}`).nextElementSibling.style.display = "none"; }});window.onload = function() { let theForm = document.getElementById("form"); theForm.addEventListener("submit", function(event) { event.preventDefault(); let stopSubmit = false; const validationFunctions = [checkFirstName, checkLastName, checkEmail, checkPhone]; validationFunctions.forEach((fun, i) => { if (!fun(theForm[i])) { theForm[i].style.borderColor = "#990000"; stopSubmit = true; } else { document.querySelector(`#${theForm[i].id}`).nextElementSibling.style.display = "none"; } }); if (stopSubmit) { event.preventDefault(); } }, false)}function checkFirstName(input) { let inputValue = input.value, errorMessage = "", letters = /^[a-zA-Z]+$/, characters = /^[a-zA-Z0-9!@#\$%\^\&*\)\(+=._-]+$/g; if (inputValue === null || inputValue === "") { errorMessage = "This field is empty."; } if (inputValue !== "") { if (inputValue.length < 3) { errorMessage = "This field has less than 3 characters."; } if (!inputValue.match(letters)) { errorMessage = "Numbers detected. Please write your first name."; } if (!inputValue.match(characters)) { errorMessage = "Special characters detected. Please write your first name."; } } if (input.nextElementSibling.tagName !== 'SPAN') { renderErrorMessage(input, errorMessage); } return errorMessage === "";}function checkLastName(input) { let inputValue = input.value, errorMessage = "", letters = /^[a-zA-Z]+$/, characters = /^[a-zA-Z0-9!@#\$%\^\&*\)\(+=._-]+$/g; if (inputValue === null || inputValue === "") { errorMessage = "This field is empty."; } if (inputValue !== "") { if (inputValue.length < 3) { errorMessage = "This field has less than 3 characters."; } if (!inputValue.match(letters)) { errorMessage = "Numbers detected. Please write your last name."; } if (!inputValue.match(characters)) { errorMessage = "Special characters detected. Please write your last name."; } } if (input.nextElementSibling.tagName !== 'SPAN') { renderErrorMessage(input, errorMessage); } return errorMessage === "";}function checkEmail(input) { let emailValue = input.value, errorMessage = ""; let regex = /^(([^<>()\[\]\\.,;:\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,}))$/; if (!emailValue.match(regex)) { errorMessage = "Not a valid email address."; } if (emailValue === "") { errorMessage = "This field is empty."; } if (input.nextElementSibling.tagName !== 'SPAN') { renderErrorMessage(input, errorMessage); } return errorMessage === "";}function checkPhone(input) { let phoneValue = input.value, errorMessage = ""; let regex = /^(((\+44\s?\d{4}|\(?0\d{4}\)?)\s?\d{3}\s?\d{3})|((\+44\s?\d{3}|\(?0\d{3}\)?)\s?\d{3}\s?\d{4})|((\+44\s?\d{2}|\(?0\d{2}\)?)\s?\d{4}\s?\d{4}))(\s?\#(\d{4}|\d{3}))?$/; if (!phoneValue.match(regex)) { errorMessage = "Not a valid UK phone number."; } if (isNaN(phoneValue)) { errorMessage = "No numbers detected. Please write a UK phone number."; } if (phoneValue === "") { errorMessage = "This field is empty."; } if (input.nextElementSibling.tagName !== 'SPAN') { renderErrorMessage(input, errorMessage); } return errorMessage === "";}function renderErrorMessage(selectedElem, errorMessage) { let errorElem = document.createElement("span"); errorElem.setAttribute("class", "error"); let errorText = document.createTextNode(errorMessage); errorElem.appendChild(errorText); selectedElem.parentNode.insertBefore(errorElem, selectedElem.nextSibling); return selectedElem;}label,button { display: block; margin: 10px 0 5px 0;}input,button { padding: 8px; width: 393px; font-size: 16px;}body,button { font-family: Arial, sans-serif;}.error { color: #FFF; display: block; margin: 0 0 15px 0; background: #990000; padding: 5px 3px 5px 5px; width: 405px; line-height: 25px;}.hide { display: none; /* background: none; */}<form id="form" action="test3success.html" novalidate="novalidate"> <label for="firstName">First Name (required)</label> <input id="firstName" type="text" name="text" required> <label for="lastName">Last Name (required)</label> <input id="lastName" type="text" name="text" required> <label for="email">Email (required)</label> <input id="email" type="email" required> <label for="phone">Phone Number (required)</label> <input id="phone" type="tel" required> <button type="submit">Submit</button></form> -
子衿沉夜
使用一个类通过最少的更改，我在错误时添加类并从所有必填字段中删除该类添加了代码theForm[X].classList.add("errorBorder")和const req = document.querySelectorAll("[required]")for (let i=0;i<req.length;i++) { req[i].classList.remove("errorBorder")}我还会在错误跨度上切换类。window.onload = function() { let theForm = document.getElementById("form"); theForm.addEventListener("submit", function(event) { let stopSubmit = false; cleanUpErrors(); if (!checkFirstName(theForm[0])) { theForm[0].classList.add("errorBorder") stopSubmit = true; } if (!checkLastName(theForm[1])) { theForm[1].classList.add("errorBorder") stopSubmit = true; } if (!checkEmail(theForm[2])) { theForm[2].classList.add("errorBorder") stopSubmit = true; } if (!checkPhone(theForm[3])) { theForm[3].classList.add("errorBorder") stopSubmit = true; } if (stopSubmit) { event.preventDefault(); } }, false)}function checkFirstName(input) { let inputValue = input.value, errorMessage = "", letters = /^[a-zA-Z]+$/, characters = /^[a-zA-Z0-9!@#\$%\^\&*\)\(+=._-]+$/g; if (inputValue === null || inputValue === "") { errorMessage = "This field is empty."; } if (inputValue !== "") { if (inputValue.length < 3) { errorMessage = "This field has less than 3 characters."; } if (!inputValue.match(letters)) { errorMessage = "Numbers detected. Please write your first name."; } if (!inputValue.match(characters)) { errorMessage = "Special characters detected. Please write your first name."; } } renderErrorMessage(input, errorMessage); return errorMessage === "";}function checkLastName(input) { let inputValue = input.value, errorMessage = "", letters = /^[a-zA-Z]+$/, characters = /^[a-zA-Z0-9!@#\$%\^\&*\)\(+=._-]+$/g; if (inputValue === null || inputValue === "") { errorMessage = "This field is empty."; } if (inputValue !== "") { if (inputValue.length < 3) { errorMessage = "This field has less than 3 characters."; } if (!inputValue.match(letters)) { errorMessage = "Numbers detected. Please write your last name."; } if (!inputValue.match(characters)) { errorMessage = "Special characters detected. Please write your last name."; } } renderErrorMessage(input, errorMessage); return errorMessage === "";}function checkEmail(input) { let emailValue = input.value, errorMessage = ""; let regex = /^(([^<>()\[\]\\.,;:\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,}))$/; if (!emailValue.match(regex)) { errorMessage = "Not a valid email address."; } if (emailValue === "") { errorMessage = "This field is empty."; } renderErrorMessage(input, errorMessage); return errorMessage === "";}function checkPhone(input) { let phoneValue = input.value, errorMessage = ""; let regex = /^(((\+44\s?\d{4}|\(?0\d{4}\)?)\s?\d{3}\s?\d{3})|((\+44\s?\d{3}|\(?0\d{3}\)?)\s?\d{3}\s?\d{4})|((\+44\s?\d{2}|\(?0\d{2}\)?)\s?\d{4}\s?\d{4}))(\s?\#(\d{4}|\d{3}))?$/; if (!phoneValue.match(regex)) { errorMessage = "Not a valid UK phone number."; } if (isNaN(phoneValue)) { errorMessage = "No numbers detected. Please write a UK phone number."; } if (phoneValue === "") { errorMessage = "This field is empty."; } renderErrorMessage(input, errorMessage); return errorMessage === "";}function renderErrorMessage(selectedElem, errorMessage) { let errorElem = document.createElement("span"); errorElem.setAttribute("class", "error"); let errorText = document.createTextNode(errorMessage); errorElem.appendChild(errorText); selectedElem.parentNode.insertBefore(errorElem, selectedElem.nextSibling); return selectedElem;}function cleanUpErrors() { let indicator = document.getElementsByTagName("span"); for (let i = 0; i < indicator.length; i++) { indicator[i].setAttribute("class", "hide"); } const req = document.querySelectorAll("[required]") for (let i=0;i<req.length;i++) { req[i].classList.remove("errorBorder") }}label,button { display: block; margin: 10px 0 5px 0;}input,button { padding: 8px; width: 393px; font-size: 16px;}body,button { font-family: Arial, sans-serif;}.error { color: #FFF; display: block; margin: 0 0 15px 0; background: #990000; padding: 5px 3px 5px 5px; width: 405px; line-height: 25px;}.hide { display: none; background: none;}.errorBorder { border-color:#990000}<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Personal Information Form</title> <script src="scripts/test5.js"></script> <link rel="stylesheet" href="css/test.css"></head><body> <form id="form" action="test3success.html" novalidate="novalidate"> <label for="firstName">First Name (required)</label> <input id="firstName" type="text" name="text" required> <label for="lastName">Last Name (required)</label> <input id="lastName" type="text" name="text" required> <label for="email">Email (required)</label> <input id="email" type="email" required> <label for="phone">Phone Number (required)</label> <input id="phone" type="tel" required> <button type="submit">Submit</button> </form></body></html>实际上，由于这些字段被标记为必填，因此您可以将自定义消息添加到 HTML5 验证中并让它处理所有内容工作正在进行中：const letters = /^[a-zA-Z]+$/,const characters = /^[a-zA-Z0-9!@#\$%\^\&*\)\(+=._-]+$/g;const emailRe = /^(([^<>()\[\]\\.,;:\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,}))$/;const phoneRe = /^(((\+44\s?\d{4}|\(?0\d{4}\)?)\s?\d{3}\s?\d{3})|((\+44\s?\d{3}|\(?0\d{3}\)?)\s?\d{3}\s?\d{4})|((\+44\s?\d{2}|\(?0\d{2}\)?)\s?\d{4}\s?\d{4}))(\s?\#(\d{4}|\d{3}))?$/;window.addEventListener("load", function() { var elements = document.querySelectorAll("input[required]"); for (let i = 0; i < elements.length; i++) { elements[i].oninvalid = function(e) { e.target.setCustomValidity(""); if (!e.target.validity.valid) { e.target.setCustomValidity("This field cannot be left blank"); } }; elements[i].oninput = function(e) { }; }})function checkName(input) { let inputValue = input.value, errorMessage = "", if (inputValue.length < 3) { this.setCustomValidity("This field has less than 3 characters."); } if (!inputValue.match(letters)) { this.setCustomValidity("Numbers detected. Please write a name."); } if (!inputValue.match(characters)) { this.setCustomValidity("Special characters detected. Please write a name."); }}function checkEmail(input) { let emailValue = input.value, errorMessage = ""; if (!emailValue.match(emailRe)) { errorMessage = "Not a valid email address."; } if (emailValue === "") { errorMessage = "This field is empty."; } renderErrorMessage(input, errorMessage); return errorMessage === "";}function checkPhone(input) { let phoneValue = input.value, errorMessage = ""; if (!phoneValue.match(phoneRe)) { errorMessage = "Not a valid UK phone number."; } if (isNaN(phoneValue)) { errorMessage = "No numbers detected. Please write a UK phone number."; } if (phoneValue === "") { errorMessage = "This field is empty."; } renderErrorMessage(input, errorMessage); return errorMessage === "";}function renderErrorMessage(selectedElem, errorMessage) { let errorElem = document.createElement("span"); errorElem.setAttribute("class", "error"); let errorText = document.createTextNode(errorMessage); errorElem.appendChild(errorText); selectedElem.parentNode.insertBefore(errorElem, selectedElem.nextSibling); return selectedElem;}label,button { display: block; margin: 10px 0 5px 0;}input,button { padding: 8px; width: 393px; font-size: 16px;}body,button { font-family: Arial, sans-serif;}.error { color: #FFF; display: block; margin: 0 0 15px 0; background: #990000; padding: 5px 3px 5px 5px; width: 405px; line-height: 25px;}.hide { display: none; background: none;}.errorBorder { border-color:#990000}<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Personal Information Form</title> <script src="scripts/test5.js"></script> <link rel="stylesheet" href="css/test.css"></head><body> <form id="form" action="test3success.html" novalidate="novalidate"> <label for="firstName">First Name (required)</label> <input id="firstName" type="text" name="text" required> <label for="lastName">Last Name (required)</label> <input id="lastName" type="text" name="text" required> <label for="email">Email (required)</label> <input id="email" type="email" required> <label for="phone">Phone Number (required)</label> <input id="phone" type="tel" required> <button type="submit">Submit</button> </form></body></html>
随时随地看视频慕课网APP
相关分类
Html5