資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 JavaScript 中的 jQuery 驗證中更改錯誤訊息的顏色？
在本教程中，我們將學習如何在使用 jQuery 表單驗證時修改 JavaScript 中錯誤訊息的顏色。表單驗證是驗證使用者在輸入欄位中提交的相關資料的過程。在這裡，我們將演示如何使用 jQuery 來驗證一個簡單的表單，其中包含登入名、密碼和確認密碼。
必要條件 - 您必須熟悉 HTML、CSS、JavaScript 和 jQuery 的基礎知識。
方法
首先，您必須建立一個包含 HTML 表單的 index.html 檔案，該表單包含使用者名稱、電子郵件地址、密碼和確認密碼的輸入欄位。將使用 Bootstrap 4 與 Bootstrap 中的表單控制元件。在結束的“<body>”元素之後新增包含 jQuery 表單驗證程式碼的“myApp.js”檔案。
要驗證整個表單，請使用下面提供的程式碼建立 myApp.js 檔案。
在文件完成載入後，在 myApp.js 檔案中隱藏所有錯誤訊息。執行驗證每個輸入欄位（包括使用者名稱、電子郵件、密碼和確認密碼）的任務。
index.html 檔案 - 下面的 HTML 程式碼顯示了使用者輸入的表單設計。
<!DOCTYPE html>
<html>
<title>How to change the color of error message in jquery validation in JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body><br>
<h1 class="text-center text-success">
Welcome to TutorialsPoint!
</h1>
<h5 class="text-center">
JQUERY FORM VALIDATION ERROR MESSAGE DISPLAYS RED COLOR
</h5><br>
<div class="container">
<div class="col-lg-8 m-auto d-block">
<form>
<div class="form-group">
<label for="userN">
Username:
</label>
<input type="text" name="username" id="myuserName" class="form-control">
<h5 id="verifyUser" style="color: red;">
Please enter the Username
</h5>
</div>
<div class="form-group">
<label for="userE">
Email:
</label>
<input type="email" name="email" id="email" required class="form-control">
<small id="emailvalid" class="form-text text-muted invalid-feedback">
Please enter your valid email id
</small>
</div>
<div class="form-group">
<label for="password">
Password:
</label>
<input type="password" name="pass" id="password" class="form-control">
<h5 id="checkPassword" style="color: red;">
Please enter your password
</h5>
</div>
<div class="form-group">
<label for="confirmPass">
Confirm Password:
</label>
<input type="password" name="username" id="confirmPass" class="form-control">
<h5 id="checkConfirmPass" style="color: red;">
Please enter your correct password
</h5>
</div>
<input type="submit" id="submitbtn" value="Submit" class="btn btn-success">
</form>
</div>
</div>
<!-- Including myApp.js jQuery Script -->
<script src="myApp.js"></script>
</body>
</html>
myApp.js 檔案 - 在上面的 HTML 檔案中，使用下面的 jQuery 程式碼執行驗證。
// Document is ready
$(document).ready(function () {
// Validate Username
$("#verifyUser").hide();
let usernameError = true;
$("#myuserName").keyup(function () {
validateUsername();
});
function validateUsername() {
let usernameValue = $("#myuserName").val();
if (usernameValue.length == "") {
$("#verifyUser").show();
usernameError = false;
return false;
} else if (usernameValue.length < 4 || usernameValue.length > 12) {
$("#verifyUser").show();
$("#verifyUser").html("The length of the username should be between 4 and 12 characters.");
usernameError = false;
return false;
} else {
$("#verifyUser").hide();
}
}
// Validate Email
const email = document.getElementById("email");
email.addEventListener("blur", () => {
let regex = /^([_\-\.0-9a-zA-Z]+)@([_\-\.0-9a-zA-Z]+)\.([a-zA-Z]){2,7}$/;
let s = email.value;
if (regex.test(s)) {
email.classList.remove("is-invalid");
emailError = true;
} else {
email.classList.add("is-invalid");
emailError = false;
}
});
// Validate Password
$("#checkPassword").hide();
let passwordError = true;
$("#password").keyup(function () {
validatePassword();
});
function validatePassword() {
let passwordValue = $("#password").val();
if (passwordValue.length == "") {
$("#checkPassword").show();
passwordError = false;
return false;
}
if (passwordValue.length < 4 || passwordValue.length > 12) {
$("#checkPassword").show();
$("#checkPassword").html(
"The length of the password should be between 4 and 12 characters."
);
$("#checkPassword").css("color", "red");
passwordError = false;
return false;
} else {
$("#checkPassword").hide();
}
}
// Validate Confirm Password
$("#checkConfirmPass").hide();
let confirmPasswordError = true;
$("#confirmPass").keyup(function () {
validateConfirmPassword();
});
function validateConfirmPassword() {
let confirmPasswordValue = $("#confirmPass").val();
let passwordValue = $("#password").val();
if (passwordValue != confirmPasswordValue) {
$("#checkConfirmPass").show();
$("#checkConfirmPass").html("Please enter your correct password");
$("#checkConfirmPass").css("color", "red");
confirmPasswordError = false;
return false;
} else {
$("#checkConfirmPass").hide();
}
}
// Submit button
$("#submitbtn").click(function () {
validateUsername();
validatePassword();
validateConfirmPassword();
validateEmail();
if (
usernameError == true &&
passwordError == true &&
confirmPasswordError == true &&
emailError == true
) {
return true;
} else {
return false;
}
});
});
輸出
以上程式碼將給出以下輸出 -
下面顯示了使用者直接點選提交按鈕時產生的結果。
下面顯示了使用者在表單中輸入不正確資訊時產生的輸出。
在下面的示例中，讓我們瞭解如何在沒有警報框的情況下在 JavaScript 中顯示錯誤。JavaScript 錯誤可以在沒有警報框的情況下顯示，但是使用警報框是更常見的做法。在不使用警報框的情況下，可以使用以下方法顯示錯誤。
方法
利用 textContent 屬性。簡單來說，textContent 用於動態更新任何節點的內容。開發人員可以使用此屬性以類似於警報框的方式顯示任何內容並吸引使用者的注意力。
語法
node.textContent = "Some error message" // To draw attention node.style.color = "red";
示例
<!DOCTYPE html>
<html>
<title>How to change the color of error message in jquery validation in JavaScript - TutorialsPoint
</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
h1 {
color: rgb(16, 125, 187);
}
.container {
padding: 15px;
width: 420px;
}
label,
input {
margin-bottom: 20px;
}
button {
float: left;
margin-left: 20px;
background-color: rgb(42, 152, 158);
color: #fff;
cursor: pointer;
}
</style>
</head>
<body style="text-align:center">
<h1>Visit TutorialsPoint to learn JavaScript</h1>
<b>You will notice the error will be dislplayed in red color</b>
<br><br>
<div class="container">
<div>
<label>Enter Your Name:</label>
<input type="text" size="50">
</div>
<div>
<label>Enter Your Phone No:</label>
<input type="text" id="myNumber" size="50">
<span id="showError"></span>
</div>
<button type="submit" onclick="errorMessg()">
Submit
</button>
</div>
</body>
<script>
function errorMessg() {
let showError = document.getElementById("showError")
if (isNaN(document.getElementById("myNumber").value)) {
// switching content and color of content
showError.textContent = "The entered Phone No is not valid"
showError.style.color = "red"
} else {
showError.textContent = "We will contact you shortly"
showError.style.color = "green"
}
}
</script>
</html>
輸入字元而不是數字，您將收到錯誤訊息。
輸入電話號碼後，您將收到成功訊息而不是錯誤訊息。
更新於: 2022-12-09
6K+ 瀏覽量
廣告