Wie zeige ich mit JavaScript einen Fehler ohne Warnfeld an?-js-Tutorial-php.cn

Wie zeige ich mit JavaScript einen Fehler ohne Warnfeld an?

WBOY

Freigeben： 2023-09-12 22:37:02

nach vorne

1555 Leute haben es durchsucht

如何使用 JavaScript 在没有警告框的情况下显示错误？

In diesem Artikel erfahren Sie, wie Sie mithilfe von innerHTML- und textContent-Eigenschaften von HTML-DOM-Elementen mithilfe von Javascript Fehler inline auf der Seite anzeigen, ohne Warnfelder anzuzeigen.

Warnfelder sind zwar nützlich, um Benutzern Fehler anzuzeigen, sie können jedoch störend sein und das Benutzererlebnis beeinträchtigen. Eine elegantere Lösung besteht darin, den Fehler inline auf der Seite anzuzeigen.

Lassen Sie uns verstehen, wie wir das obige Ergebnis auf zwei Arten erreichen können

Methode 1

Bei dieser Methode verwenden wir das innerHTML-DOM-Elementattribut, um die Fehlermeldung inline im Formular anzuzeigen.

Beispiel

Lassen Sie uns die obige Methode anhand eines Beispiels verstehen.

Dateiname: 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>

Nach dem Login kopieren

Methode 2

In dieser Methode verwenden wir drei verschiedene Methoden zum Anzeigen von Fehlermeldungen. Dazu gehören die Verwendung von Inline-Fehlermeldungen, CSS-Stilen, den Methoden classList und setAttributes.

Beispiel

Lassen Sie uns die obige Methode anhand eines Beispiels verstehen.

Dateiname: 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>

Nach dem Login kopieren

Fazit

Bieten Sie Benutzern ein eleganteres und benutzerfreundlicheres Erlebnis, indem Sie Fehler inline auf der Seite anzeigen, anstatt ein Warnfeld zu verwenden. In diesem Artikel haben wir gelernt, wie man mithilfe von Javascript mithilfe von zwei Methoden Fehlermeldungen inline und ohne die Warnbox anzeigt. Wir verwenden die Eigenschaften innerHTML, textContent bzw. innerText, um das gewünschte Ergebnis zu erzielen.

Das obige ist der detaillierte Inhalt vonWie zeige ich mit JavaScript einen Fehler ohne Warnfeld an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!