我試圖讓我的代碼忽略一個根本不需要文本的特定欄位，但如果它包含除數值以外的任何內容，它會給我一個錯誤。相反，當沒有輸入任何內容時，它會給我錯誤。我有問題的代碼是一個用于檢查數值的正則運算式函式，我的驗證函式呼叫數字正則運算式函式，如果 input.classList.contains “numeric”，如果正則運算式未驗證，則會出錯。我的整個代碼發布在下面，因為我不知道問題出在哪里
const checkAlphabet = (input) => {
const required = /^([A-Za-z]) $/;
const validate = required.test(input);
return validate;
};
const checkAlphaNumeric = (input) => {
const required = /^([A-Za-z0-9]) $/;
const validate = required.test(input);
return validate;
};
const checkAlphaNumericId = (input) => {
const required = /^([A-Za-z0-9]) $/;
const validate = required.test(input);
return validate;
};
const checkWhiteSpace = (input) => {
const required = /^([^-\s]) $/;
const validate = required.test(input);
return validate;
};
const checkNumeric = (input) => {
const required = /^([0-9]) $/;
const validate = required.test(input);
return validate;
};
const checkDateReq = (input) => {
const required = /^(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.](19|20)\d\d $/;
const validate = required.test(input);
return validate;
};
const checkPhoneNumber = (input) => {
const required = /^\s*(?:\ ?(\d{1,3}))?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{4})(?: *x(\d ))?\s*$/;
const validate = required.test(input);
return validate;
};
const checkPassWord = (input) => {
const required = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]). $/;
const validate = required.test(input);
return validate;
};
const checkLength = (input, minLength) => {
input == minLength
};
const performValidation = (event) => {
event.preventDefault();
const form = event.target.form;
const errorsDiv = form.previousElementSibling;
const errorContainer = document.createElement('ul');
if (errorsDiv.firstChild) {
errorsDiv.removeChild(errorsDiv.lastChild);
}
errorsDiv.appendChild(errorContainer);
for (const input of form) {
const fieldInput = input.value;
if (input.classList.contains("required")) {
if (!checkWhiteSpace(fieldInput)) {
const errorMesg = document.createElement('li');
errorMesg.className = 'errorMsgDis';
errorMesg.innerHTML = "Required fields mut have a value that is not empty or whitespace."
errorContainer.appendChild(errorMesg);
}
}
if (input.classList.contains("required_size")) {
if (!checkLength(fieldInput.length, input.minLength)) {
const errorMesg = document.createElement('li');
errorMesg.className = 'errorMsgDis';
errorMesg.innerHTML = "Required_size field lengths must exactly match the minlength attribute of that field."
errorContainer.appendChild(errorMesg);
}
}
if (input.classList.contains("alphabetic")) {
if (!checkAlphabet(fieldInput)) {
const errorMesg = document.createElement('li');
errorMesg.className = 'errorMsgDis';
errorMesg.innerHTML = "Alphabetic fields must be a series of alphabetic characters"
errorContainer.appendChild(errorMesg);
}
}
if (input.classList.contains("username")) {
if (!checkAlphaNumeric(fieldInput)) {
const errorMesg = document.createElement('li');
errorMesg.className = 'errorMsgDis';
errorMesg.innerHTML = "Alphanumeric fields must be a series of alphanumeric characters"
errorContainer.appendChild(errorMesg);
}
if (fieldInput.length < 8) {
const errorMesg = document.createElement('li');
errorMesg.className = 'errorMsgDis';
errorMesg.innerHTML = "Username fields must contain at least 8 characters."
errorContainer.appendChild(errorMesg);
}
}
if (input.classList.contains("numeric")) {
if (!checkNumeric(fieldInput)) {
const errorMesg = document.createElement('li');
errorMesg.className = 'errorMsgDis';
errorMesg.innerHTML = "Numeric fields must have a series of numeric characters."
errorContainer.appendChild(errorMesg);
}
}
if (input.classList.contains("date")) {
if (!checkDateReq(fieldInput)) {
const errorMesg = document.createElement('li');
errorMesg.className = 'errorMsgDis';
errorMesg.innerHTML = "Date fields must match the format of XX/XX/XXXX."
errorContainer.appendChild(errorMesg);
}
}
if (input.classList.contains("phone")) {
if (!checkPhoneNumber(fieldInput)) {
const errorMesg = document.createElement('li');
errorMesg.className = 'errorMsgDis';
errorMesg.innerHTML = "Phone fields must match the format of XXX-XXX-XXXX."
errorContainer.appendChild(errorMesg);
}
}
if (input.classList.contains("password")) {
if (!checkPassWord(fieldInput)) {
const errorMesg = document.createElement('li');
errorMesg.className = 'errorMsgDis';
errorMesg.innerHTML = "Password fields must contain one or more of the following types: uppercase letters, lowercase letters, numbers, special characters."
errorContainer.appendChild(errorMesg);
}
}
}
};
const validPress = () => {
const buttons = document.getElementsByName("submitBtn");
for (const button of buttons) {
button.addEventListener("click", performValidation);
}
}
validPress();
和 HTML
<!DOCTYPE html>
<!-- Use this html file to verify your javascript library is functional you should not need to make
any changes to this file for your Javascript library to work -->
<html>
<head>
<title>Form Validation Project</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- Location of user Validation Javascript -->
<script type="text/javascript" src="./index.js" defer></script>
<!-- Optional user Validation stylesheet -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<br>
<div >
<div >
<div >
<h3 >Form One</h3>
</div>
<div >
<div >
<!-- Error messages can go here -->
</div>
<form novalidate>
<div>
<label for="firstname">First Name : </label>
<input type="text" name="firstname" id="firstname" /> Required Field
</div>
<div>
<label for="lastname">Last Name : </label>
<input type="text" name="lastname" id="lastname" /> Required Field
</div>
<div>
<label for="username">Username : </label>
<input type="text" name="username" id="username" /> Required Field
</div>
<div>
<label for="password">Password : </label>
<input type="text" name="password" id="password" /> Required Field
</div>
<div>
<label for="zip">Zip Code : </label>
<input type="text" name="zip" id="zip" minlength="5" /> Number, Minimum Length 5
</div>
<div>
<label for="ID">Employee ID : </label>
<input type="text" name="ID" id="ID" /> Number, Required
</div>
<div>
<input type="submit" name="submitBtn" value="Validate">
</div>
</form>
</div>
</div>
</div>
<div >
<div >
<div >
<h3 >Form Two</h3>
</div>
<div >
<div >
<!-- Error messages can go here -->
</div>
<form novalidate>
<div>
<label for="bananas">Quantity of bananas : </label>
<input type="text" name="bananas" id="bananas" /> Number, not Required
</div>
<div>
<label for="weekday">Weekday : </label>
<input type="text" name="weekday" id="weekday" /> Required Field
</div>
<div>
<label for="phone">Phone Number : </label>
<input type="text" name="phone" id="phone" /> phone
</div>
<div>
<label for="alphaID">Alphanumeric ID : </label>
<input type="text" name="alphaID" id="alphaID" minlength="5" /> Minimum Length 5 Required
</div>
<div>
<label for="painLevel">Pain Level : </label>
<input type="text" name="painLevel" id="painLevel" minlength="1" /> Number, Required Size 1
</div>
<div>
<label for="Date">Date : </label>
<input type="text" name="Date" id="date" /> Date
</div>
<div>
<input type="submit" name="submitBtn" value="Validate">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
uj5u.com熱心網友回復：
您正則運算式/^([0-9]) $/的checkNumeric()預期，因為至少一個數字 。試試/^([0-9])*$/。這也接受空字串，因為*匹配 0 直到無窮大的數字。
編輯：我創建了一個顯示正則運算式的程式。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/406983.html
標籤：