Rumah >hujung hadapan web >tutorial js >Bagaimana untuk memaparkan ralat tanpa kotak amaran menggunakan JavaScript?

Bagaimana untuk memaparkan ralat tanpa kotak amaran menggunakan JavaScript?

WBOYke hadapan: 2023-09-12 22:37:021526semak imbas

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

Dalam artikel ini, kita akan belajar cara memaparkan ralat sebaris pada halaman tanpa menunjukkan kotak amaran menggunakan javascript dengan bantuan innerHTML dan textContent properties elemen DOM HTML.

Walaupun kotak amaran berguna untuk menunjukkan ralat kepada pengguna, ia boleh mengganggu dan mengganggu pengalaman pengguna. Penyelesaian yang lebih elegan ialah memaparkan ralat sebaris pada halaman.

Mari kita fahami bagaimana untuk mencapai keputusan di atas melalui dua kaedah

Kaedah 1

Dalam pendekatan ini, kami akan menggunakan atribut elemen DOM innerHTML untuk memaparkan mesej ralat sebaris dalam borang.

Contoh

Mari kita fahami kaedah di atas melalui contoh.

Nama fail: 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>

Kaedah 2

Dalam kaedah ini, kami akan menggunakan 3 kaedah berbeza untuk memaparkan mesej ralat, yang melibatkan penggunaan mesej ralat sebaris, gaya CSS, classList dan kaedah setAttributes.

Contoh

Mari kita fahami kaedah di atas melalui contoh.

Nama fail: 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>

KESIMPULAN

Dengan memaparkan ralat sebaris pada halaman dan bukannya menggunakan kotak amaran, anda boleh memberikan pengguna anda pengalaman yang lebih elegan dan mesra pengguna. Dalam artikel ini, kami mempelajari cara memaparkan mesej ralat dalam talian dan tanpa menunjukkan kotak amaran menggunakan javascript dengan bantuan 2 kaedah. Kami masing-masing menggunakan innerHTML, textContent dan innerText untuk mencapai hasil yang diinginkan.

Atas ialah kandungan terperinci Bagaimana untuk memaparkan ralat tanpa kotak amaran menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html dom innerHTML

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk menyemak sama ada dua nombor adalah lebih kurang sama dalam JavaScript?Artikel seterusnya：Bagaimana untuk menyemak sama ada dua nombor adalah lebih kurang sama dalam JavaScript?

Artikel berkaitan

Lihat lagi