Hướng dẫn how to show error message in javascript - cách hiển thị thông báo lỗi trong javascript

Question

Thí dụ

Trả về thông báo lỗi:

Nội dung chính Show

Định nghĩa và cách sử dụng
Giá trị trả lại
Hỗ trợ trình duyệt
Các trang liên quan
Làm thế nào để bạn hiển thị thông báo lỗi bên dưới trường đầu vào trong HTML?
Làm cách nào để hiển thị lỗi console?
Làm thế nào để bạn hiển thị các tin nhắn cảnh báo trong HTML?
Làm thế nào để bạn hiển thị thông báo lỗi trong React JS?

Hãy thử {& nbsp; & nbsp; adddlert ("khách chào mừng!");
adddlert("Welcome guest!");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}

Hãy tự mình thử »

Định nghĩa và cách sử dụng

Thuộc tính

<html>
  <head>
  <script type="text/javascript">
  function validate() {
  if(myform.fname.value.length==0)
  {
   document.getElementById("fname").innerHTML="this is invalid name ";
  }
  }
  </script>
  </head>
  <body>
  <form name="myform">
  First_Name
  <input type=text id=fname name=fname onblur="validate()"> </input>

  <br> <br>
  Last_Name
  <input type=text id=lname name=lname onblur="validate()"> </input>

  <br>
  <input type=button value=check> 

  </form>
  </body>
</html>

7 đặt hoặc trả về thông báo lỗi.

Xem thêm:

Thuộc tính tên của đối tượng lỗi.

Cú pháp

Giá trị trả lại

Một chuỗi mô tả lỗi (thay đổi giữa các trình duyệt).

Hỗ trợ trình duyệt

<html>
  <head>
  <script type="text/javascript">
  function validate() {
  if(myform.fname.value.length==0)
  {
   document.getElementById("fname").innerHTML="this is invalid name ";
  }
  }
  </script>
  </head>
  <body>
  <form name="myform">
  First_Name
  <input type=text id=fname name=fname onblur="validate()"> </input>

  <br> <br>
  Last_Name
  <input type=text id=lname name=lname onblur="validate()"> </input>

  <br>
  <input type=button value=check> 

  </form>
  </body>
</html>

8 là tính năng ECMAScript1 (ES1).

ES1 (JavaScript 1997) được hỗ trợ đầy đủ trong tất cả các trình duyệt:


Trình duyệt Chrome	I E	Bờ rìa	Firefox	Cuộc đi săn	Opera
Đúng	Đúng	Đúng	Đúng	Đúng	Đúng

Các trang liên quan

Hướng dẫn JavaScript: Lỗi JavaScript

Tham khảo JavaScript: thuộc tính tên

Phương thức Window ALERT () được sử dụng để hiển thị hộp cảnh báo. Nó hiển thị một thông báo được chỉ định cùng với nút OK và thường được sử dụng để đảm bảo rằng thông tin đi qua người dùng. Nó trả về một chuỗi đại diện cho văn bản để hiển thị trong hộp cảnh báo.

Làm thế nào để bạn hiển thị thông báo lỗi trong React JS?

Điều này đảm bảo rằng tất cả các trường bắt buộc được điền và dữ liệu ở định dạng chính xác. Bằng cách sử dụng JavaScript để xác nhận các biểu mẫu, bạn có thể cải thiện trải nghiệm người dùng trên trang web của mình và tránh các vấn đề tiềm ẩn với quy trình gửi trang web của bạn.

Khi hiển thị thông báo lỗi, điều quan trọng là giữ cho chúng đơn giản và dễ hiểu. Thông điệp sẽ giải thích những gì đã sai và làm thế nào để khắc phục sự cố. Nó cũng dễ dàng tìm thấy, để người dùng có thể nhanh chóng nhìn thấy và khắc phục sự cố.

Có một vài cách khác nhau mà bạn có thể hiển thị thông báo lỗi trong JavaScript. Một cách là sử dụng một hộp cảnh báo. Hộp cảnh báo rất hữu ích để hiển thị các tin nhắn ngắn cho người dùng. Chúng rất dễ tạo và có thể được tùy chỉnh để phù hợp với giao diện của trang web của bạn.

Thí dụ

try {
  adddlert("Welcome guest!");
}
catch(err) {
  document.getElementById("demo").innerHTML = err.message;
}

Một cách khác để hiển thị thông báo lỗi là sử dụng thẻ div. Thẻ div là các phần tử HTML có thể được sử dụng để tạo các thùng chứa cho các phần tử HTML khác. Bằng cách sử dụng thẻ DIV, bạn có thể kiểm soát nơi thông báo được hiển thị trên trang và trông nó như thế nào.

Bạn cũng có thể sử dụng CSS để tạo kiểu thẻ DIV, điều này sẽ cho bạn quyền kiểm soát nhiều hơn đối với giao diện của thông báo lỗi.

Nếu bạn muốn hiển thị một thông báo lỗi dài, bạn có thể sử dụng thẻ đoạn văn. Thẻ đoạn văn được sử dụng để tạo các khối văn bản. Bằng cách sử dụng thẻ đoạn văn, bạn có thể kiểm soát nơi thông báo được hiển thị trên trang và vẻ ngoài của nó.

Bạn cũng có thể sử dụng CSS để tạo kiểu thẻ đoạn văn, điều này sẽ cho bạn quyền kiểm soát nhiều hơn đối với giao diện của thông báo lỗi.

Khi chọn cách hiển thị thông báo lỗi của bạn, điều quan trọng là phải xem xét loại thông tin bạn cần truyền tải cho người dùng. Nếu bạn chỉ cần hiển thị một tin nhắn ngắn, một hộp cảnh báo có thể là tùy chọn tốt nhất.

Nếu bạn cần hiển thị một tin nhắn dài hoặc cung cấp thêm thông tin về lỗi, thẻ div hoặc đoạn văn có thể là một tùy chọn tốt hơn.

Khi bạn đã quyết định cách hiển thị thông báo lỗi của mình, bạn sẽ cần viết mã để tạo thông báo. Mã cho một hộp cảnh báo rất đơn giản và dễ hiểu.

Mã cho thẻ div hoặc thẻ đoạn văn phức tạp hơn một chút, nhưng vẫn dễ hiểu.

Khi viết thông báo lỗi của bạn, điều quan trọng là phải ghi nhớ những điều sau:

Giữ thông điệp ngắn và đến điểm
Giải thích những gì đã sai và làm thế nào để khắc phục sự cố
Đảm bảo tin nhắn dễ tìm thấy

Thực hiện theo các hướng dẫn này sẽ giúp bạn tạo một thông báo lỗi hiệu quả sẽ cải thiện trải nghiệm người dùng trên trang web của bạn. Cảm ơn vì đã đọc!

Vui lòng sửa mã dưới đây, nó không hoạt động như mong đợi, tôi cần một thông báo lỗi được hiển thị chỉ bên cạnh trường văn bản trong biểu mẫu khi người dùng nhập tên không hợp lệ

<html>
  <head>
  <script type="text/javascript">
  function validate() {
  if(myform.fname.value.length==0)
  {
   document.getElementById("fname").innerHTML="this is invalid name ";
  }
  }
  </script>
  </head>
  <body>
  <form name="myform">
  First_Name
  <input type=text id=fname name=fname onblur="validate()"> </input>

  <br> <br>
  Last_Name
  <input type=text id=lname name=lname onblur="validate()"> </input>

  <br>
  <input type=button value=check> 

  </form>
  </body>
</html>

Alvin Wong

Huy hiệu vàng 12k548 Huy hiệu bạc76 Huy hiệu đồng5 gold badges48 silver badges76 bronze badges

hỏi ngày 5 tháng 2 năm 2013 lúc 7:26Feb 5, 2013 at 7:26

5

Hãy thử mã này

<html>
<head>
 <script type="text/javascript">
 function validate() {
  if(myform.fname.value.length==0)
  {
document.getElementById('errfn').innerHTML="this is invalid name";
  }
 }
 </script>
</head>
<body>
 <form name="myform">
  First_Name
  <input type=text id=fname name=fname onblur="validate()"> </input><div id="errfn">   </div>

<br> <br>
Last_Name
<input type=text id=lname name=lname onblur="validate()"> </input>

<br>
<input type=button value=check> 

</form>
</body>
</html>

Đã trả lời ngày 5 tháng 2 năm 2013 lúc 7:43Feb 5, 2013 at 7:43

ѕ c đềuѕтƒ

3.50710 Huy hiệu vàng45 Huy hiệu bạc78 Huy hiệu Đồng10 gold badges45 silver badges78 bronze badges

Tôi đồng ý với @renjith.r Trả lời Nhưng nếu bạn muốn hiển thị thông báo lỗi chỉ bên cạnh TextBox. Giống như dưới đây@ReNjITh.R answer but If you want to display error message just beside textbox. Just like below

<html>
<head>
<script type="text/javascript">
    function validate() 
    {
        if(myform.fname.value.length==0)
        {
           document.getElementById('errfn').innerHTML="this is invalid name";
        }
    }
</script>
</head>
<body>
    <form name="myform">
         First_Name
         <input type=text id=fname name=fname onblur="validate()" /><span id="errfn"></span>
        <br> <br>
         Last_Name
         <input type=text id=lname name=lname onblur="validate()"/><br>
         <input type=button value=check /> 
    </form>
</body>

Đã trả lời ngày 5 tháng 2 năm 2013 lúc 8:17Feb 5, 2013 at 8:17

Devang Rathoddevang RathodDevang Rathod

6.4942 Huy hiệu vàng22 Huy hiệu bạc31 Huy hiệu Đồng2 gold badges22 silver badges31 bronze badges

1

Thạc sĩ web hoặc lập trình viên web, vui lòng chèn

<!DOCTYPE html>

Khi bắt đầu trang của bạn. Thứ hai, bạn nên gửi kèm các thuộc tính của mình với các trích dẫn như

type="text" id="fname"

Phần tử đầu vào không nên chứa phần tử kết thúc, chỉ cần đóng nó như: element should not contain end element, just close it like:

/>

Phần tử đầu vào không có

<html>
  <head>
  <script type="text/javascript">
  function validate() {
  if(myform.fname.value.length==0)
  {
   document.getElementById("fname").innerHTML="this is invalid name ";
  }
  }
  </script>
  </head>
  <body>
  <form name="myform">
  First_Name
  <input type=text id=fname name=fname onblur="validate()"> </input>

  <br> <br>
  Last_Name
  <input type=text id=lname name=lname onblur="validate()"> </input>

  <br>
  <input type=button value=check> 

  </form>
  </body>
</html>

9, nó có

<html>
<head>
 <script type="text/javascript">
 function validate() {
  if(myform.fname.value.length==0)
  {
document.getElementById('errfn').innerHTML="this is invalid name";
  }
 }
 </script>
</head>
<body>
 <form name="myform">
  First_Name
  <input type=text id=fname name=fname onblur="validate()"> </input><div id="errfn">   </div>

<br> <br>
Last_Name
<input type=text id=lname name=lname onblur="validate()"> </input>

<br>
<input type=button value=check> 

</form>
</body>
</html>

0 Sor dòng JavaScript của bạn nên là:

document.getElementById("fname").value = "this is invalid name";

Vui lòng viết theo cách có tổ chức và đảm bảo rằng nó thuận tiện cho các tiêu chuẩn.

Đã trả lời ngày 5 tháng 2 năm 2013 lúc 7:41Feb 5, 2013 at 7:41

Fredrick Gaussfredrick GaussFredrick Gauss

5.0971 Huy hiệu vàng26 Huy hiệu bạc43 Huy hiệu đồng1 gold badge26 silver badges43 bronze badges

bạn có thể thử nó như thế này

 <html>
          <head>
          <script type="text/javascript">
          function validate() 
          {
            var fnameval=document.getElementById("fname").value;
            var fnamelen=Number(fnameval.length);
               if(fnamelen==0)
               {
                  document.getElementById("fname_msg").innerHTML="this is invalid name ";
                }
            }
          </script>
          </head>
          <body>
          <form name="myform">
          First_Name
          <input type=text id=fname name=fname onblur="validate()"> </input>
           <span id=fname_msg></span>
          <br> <br>
          Last_Name
          <input type=text id=lname name=lname onblur="validate()"> </input>

          <br>
          <input type=button value=check> 

          </form>
          </body>
        </html>

Đã trả lời ngày 5 tháng 2 năm 2013 lúc 7:30Feb 5, 2013 at 7:30

0

Bạn cũng có thể thử cái này

<tr>
    <th>Name :</th>
    <td><input type="text" name="name" id="name" placeholder="Enter Your Name"><div id="name_error"></div></td>
</tr>



    function register_validate()
{
    var name = document.getElementById('name').value;
    submit = true;
    if(name == '')
    {
        document.getElementById('name_error').innerHTML = "Name Is Required";
        return false;
    }
    return submit;
}
document.getElementById('name').onkeyup = removewarning;
function removewarning()
{
    document.getElementById(this.id +'_error').innerHTML = "";
}

Đã trả lời ngày 13 tháng 10 năm 2016 lúc 6:57Oct 13, 2016 at 6:57

Đầu tiên bạn đang cố gắng viết vào bên trong của trường đầu vào. Điều này sẽ không hoạt động. Bạn cần phải có một div hoặc nhịp để viết thư. Thử một cái gì đó như:

<html>
  <head>
  <script type="text/javascript">
  function validate() {
  if(myform.fname.value.length==0)
  {
   document.getElementById("fname").innerHTML="this is invalid name ";
  }
  }
  </script>
  </head>
  <body>
  <form name="myform">
  First_Name
  <input type=text id=fname name=fname onblur="validate()"> </input>

  <br> <br>
  Last_Name
  <input type=text id=lname name=lname onblur="validate()"> </input>

  <br>
  <input type=button value=check> 

  </form>
  </body>
</html>

0

Sau đó thay đổi chức năng xác thực của bạn thành đọc

<html>
  <head>
  <script type="text/javascript">
  function validate() {
  if(myform.fname.value.length==0)
  {
   document.getElementById("fname").innerHTML="this is invalid name ";
  }
  }
  </script>
  </head>
  <body>
  <form name="myform">
  First_Name
  <input type=text id=fname name=fname onblur="validate()"> </input>

  <br> <br>
  Last_Name
  <input type=text id=lname name=lname onblur="validate()"> </input>

  <br>
  <input type=button value=check> 

  </form>
  </body>
</html>

1

Thứ hai, tôi luôn do dự về việc sử dụng Onblur cho loại điều này. Có thể gửi biểu mẫu mà không thoát khỏi trường (ví dụ: khóa trả về) trong trường hợp đó mã xác thực của bạn sẽ không được thực thi. Tôi thích chạy xác thực từ nút gửi biểu mẫu và sau đó gọi trình gửi () từ bên trong hàm chỉ khi tài liệu đã truyền xác thực.

Đã trả lời ngày 5 tháng 2 năm 2013 lúc 7:41Feb 5, 2013 at 7:41

Fredrick Gaussfredrick GaussElPedro

5.0971 Huy hiệu vàng26 Huy hiệu bạc43 Huy hiệu đồng10 silver badges16 bronze badges

bạn có thể thử nó như thế này

<html>
  <head>
  <script type="text/javascript">
  function validate() {
  if(myform.fname.value.length==0)
  {
   document.getElementById("fname").innerHTML="this is invalid name ";
  }
  }
  </script>
  </head>
  <body>
  <form name="myform">
  First_Name
  <input type=text id=fname name=fname onblur="validate()"> </input>

  <br> <br>
  Last_Name
  <input type=text id=lname name=lname onblur="validate()"> </input>

  <br>
  <input type=button value=check> 

  </form>
  </body>
</html>

2

Đã trả lời ngày 5 tháng 2 năm 2013 lúc 7:30

<html>
  <head>
  <script type="text/javascript">
  function validate() {
  if(myform.fname.value.length==0)
  {
   document.getElementById("fname").innerHTML="this is invalid name ";
  }
  }
  </script>
  </head>
  <body>
  <form name="myform">
  First_Name
  <input type=text id=fname name=fname onblur="validate()"> </input>

  <br> <br>
  Last_Name
  <input type=text id=lname name=lname onblur="validate()"> </input>

  <br>
  <input type=button value=check> 

  </form>
  </body>
</html>

3

Bạn cũng có thể thử cái nàyFeb 5, 2013 at 7:53

Đã trả lời ngày 13 tháng 10 năm 2016 lúc 6:57

<html>
  <head>
  <script type="text/javascript">
  function validate() {
  if(myform.fname.value.length==0)
  {
   document.getElementById("fname").innerHTML="this is invalid name ";
  }
  }
  </script>
  </head>
  <body>
  <form name="myform">
  First_Name
  <input type=text id=fname name=fname onblur="validate()"> </input>

  <br> <br>
  Last_Name
  <input type=text id=lname name=lname onblur="validate()"> </input>

  <br>
  <input type=button value=check> 

  </form>
  </body>
</html>

4

Đầu tiên bạn đang cố gắng viết vào bên trong của trường đầu vào. Điều này sẽ không hoạt động. Bạn cần phải có một div hoặc nhịp để viết thư. Thử một cái gì đó như:Feb 5, 2013 at 7:57

Sau đó thay đổi chức năng xác thực của bạn thành đọcTechmonk

Thứ hai, tôi luôn do dự về việc sử dụng Onblur cho loại điều này. Có thể gửi biểu mẫu mà không thoát khỏi trường (ví dụ: khóa trả về) trong trường hợp đó mã xác thực của bạn sẽ không được thực thi. Tôi thích chạy xác thực từ nút gửi biểu mẫu và sau đó gọi trình gửi () từ bên trong hàm chỉ khi tài liệu đã truyền xác thực.12 silver badges20 bronze badges

Elpedroelpedro

<html>
  <head>
  <script type="text/javascript">
  function validate() {
  if(myform.fname.value.length==0)
  {
   document.getElementById("fname").innerHTML="this is invalid name ";
  }
  }
  </script>
  </head>
  <body>
  <form name="myform">
  First_Name
  <input type=text id=fname name=fname onblur="validate()"> </input>

  <br> <br>
  Last_Name
  <input type=text id=lname name=lname onblur="validate()"> </input>

  <br>
  <input type=button value=check> 

  </form>
  </body>
</html>

5

56610 Huy hiệu bạc16 Huy hiệu đồng

Cố gắng như thế này:Feb 5, 2013 at 7:36

marbor3marbor3marbor3

Bây giờ HTML:2 silver badges12 bronze badges

Đã trả lời ngày 5 tháng 2 năm 2013 lúc 7:53

<html>
  <head>
  <script type="text/javascript">
  function validate() {
  if(myform.fname.value.length==0)
  {
   document.getElementById("fname").innerHTML="this is invalid name ";
  }
  }
  </script>
  </head>
  <body>
  <form name="myform">
  First_Name
  <input type=text id=fname name=fname onblur="validate()"> </input>

  <br> <br>
  Last_Name
  <input type=text id=lname name=lname onblur="validate()"> </input>

  <br>
  <input type=button value=check> 

  </form>
  </body>
</html>

6

Bạn nên sử dụng .Value và không .innerhtml vì nó là phần tử dạng loại đầu vàoFeb 5, 2013 at 8:02

Đã trả lời ngày 5 tháng 2 năm 2013 lúc 7:57Manoj Purohit

TechMonkTechMonk1 gold badge14 silver badges18 bronze badges

1.45912 Huy hiệu bạc20 Huy hiệu đồng

Cài đặt bên trong của giá trị đầu vào sẽ không làm bất cứ điều gì tốt ở đây, hãy thử với các phần tử khác như Span hoặc chỉ hiển thị thông báo lỗi đã thực hiện và ẩn trước đó. Bạn có thể đặt giá trị của trường tên tho.Mar 27, 2020 at 15:43

VĨ CẦMAmadi

Đã trả lời ngày 5 tháng 2 năm 2013 lúc 7:364 bronze badges

Làm thế nào để bạn hiển thị thông báo lỗi bên dưới trường đầu vào trong HTML?

Để tùy chỉnh sự xuất hiện và văn bản của các tin nhắn này, bạn phải sử dụng JavaScript; Không có cách nào để làm điều đó chỉ bằng cách sử dụng HTML và CSS. HTML5 cung cấp API xác thực ràng buộc để kiểm tra và tùy chỉnh trạng thái của một phần tử biểu mẫu. var email = tài liệu. getEuityByid ("mail"); e-mail.

Làm cách nào để hiển thị lỗi console?

Trình duyệt Chrome.Nhấn Lệnh+Tùy chọn+J (Mac) hoặc Control+Shift+J (Windows, Linux, Chrome OS) để nhảy thẳng vào bảng điều khiển của Chrome Devtools.Hoặc, điều hướng đến nhiều công cụ hơn> Công cụ phát triển từ menu Chrome và nhấp vào tab Bảng điều khiển.Bảng điều khiển lỗi sẽ mở.navigate to More Tools > Developer Tools from Chrome menu, and click Console tab. The error console will open.

Làm thế nào để bạn hiển thị các tin nhắn cảnh báo trong HTML?

Phương thức Window ALERT () được sử dụng để hiển thị hộp cảnh báo.Nó hiển thị một thông báo được chỉ định cùng với nút OK và thường được sử dụng để đảm bảo rằng thông tin đi qua người dùng.Nó trả về một chuỗi đại diện cho văn bản để hiển thị trong hộp cảnh báo.