資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在不使用警告框的情況下用JavaScript顯示錯誤？
在本文中，我們將學習如何使用javascript以及HTML DOM元素的innerHTML和textContent屬性，在頁面上內聯顯示錯誤，而無需警告框。
雖然警告框對於向用戶顯示錯誤很有用，但它們可能會造成干擾並中斷使用者體驗。更優雅的解決方案是在頁面上內聯顯示錯誤。
讓我們瞭解如何透過兩種方法來實現上述結果
方法一
在這種方法中，我們將使用innerHTML DOM元素屬性在表單中內聯顯示錯誤訊息。
示例
讓我們透過一個示例來了解上述方法。
檔名：index.html
<html lang="en">
<head>
<title>How to display error without alert box using JavaScript?</title>
<style>
span {
color: red;
}
</style>
</head>
<body>
<h3>How to display error without alert box using JavaScript?</h3>
<form name="myForm" onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<span id="nameError"></span><br>
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
var name = document.forms["myForm"]["name"].value;
if (name == "") {
document.getElementById("nameError").innerHTML = "Please enter your name";
return false;
}
}
</script>
</body>
</html>
方法二
在這種方法中，我們將使用三種不同的方法來顯示錯誤訊息，這涉及使用內聯錯誤訊息、CSS樣式、classList和setAttributes方法。
示例
讓我們透過一個示例來了解上述方法。
檔名：index.html
<html lang="en">
<head>
<title>How to display error without alert box using JavaScript?</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<h3>How to display error without alert box using JavaScript?</h3>
<form name="myForm" onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<span id="nameError"></span><br>
<input type="submit" value="Submit">
</form>
<script>
// Method 1: Using inline error messages
function validateForm() {
var name = document.forms["myForm"]["name"].value;
if (name == "") {
document.getElementById("nameError").innerHTML = "Please enter your name";
return false;
}
}
// Method 2: Using CSS styling
function validateForm() {
var name = document.forms["myForm"]["name"].value;
if (name == "") {
document.getElementById("nameError").textContent = "Please enter your name";
document.getElementById("nameError").style.color = "red";
return false;
}
}
// Method 3: Using classList
function validateForm() {
var name = document.forms["myForm"]["name"].value;
if (name == "") {
document.getElementById("nameError").textContent = "Please enter your name";
document.getElementById("nameError").classList.add("error");
return false;
}
}
// Method 4: Using setAttribute
function validateForm() {
var name = document.forms["myForm"]["name"].value;
if (name == "") {
document.getElementById("nameError").textContent = "Please enter your name";
document.getElementById("nameError").setAttribute("style", "color: red;");
return false;
}
}
</script>
</body>
</html>
結論
透過在頁面上內聯顯示錯誤而不是使用警告框，可以為使用者提供更優雅且使用者友好的體驗。在本文中，我們學習瞭如何使用javascript和兩種方法在不使用警告框的情況下內聯顯示錯誤訊息。我們分別使用了innerHTML、textContent和innerText屬性來實現所需的結果。
更新於：2023年8月2日
1K+ 次瀏覽
廣告