Hướng dẫn javascript form validation on blur - xác thực biểu mẫu javascript trên mờ

Thí dụ

Thực hiện JavaScript khi người dùng rời khỏi trường đầu vào:

Hãy tự mình thử »

Thêm ví dụ "hãy thử nó" dưới đây.

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

Sự kiện Onblur xảy ra khi một đối tượng mất tập trung.

Sự kiện Onblur thường được sử dụng với mã xác thực biểu mẫu (ví dụ: khi người dùng rời khỏi trường biểu mẫu).

Mẹo: Sự kiện Onblur là đối nghịch với sự kiện OnF Focus. The onblur event is the opposite of the onfocus event.

Mẹo: Sự kiện Onblur tương tự như sự kiện OnF Focusout. Sự khác biệt chính là sự kiện Onblur không bong bóng. Do đó, nếu bạn muốn tìm hiểu xem một yếu tố hoặc con của nó sẽ mất tập trung, bạn có thể sử dụng sự kiện onfocusout. Tuy nhiên, bạn có thể đạt được điều này bằng cách sử dụng tham số Usecapture tùy chọn của phương thức addEventListener () cho sự kiện Onblur.The onblur event is similar to the onfocusout event. The main difference is that the onblur event does not bubble. Therefore, if you want to find out whether an element or its child loses focus, you could use the onfocusout event. However, you can achieve this by using the optional useCapture parameter of the addEventListener() method for the onblur event.

Hỗ trợ trình duyệt

Cú pháp

Trong javascript, sử dụng phương thức addEventListener ():

Object.AddeventListener ("Blur", MyScript);

Hãy tự mình thử »

Thêm ví dụ "hãy thử nó" dưới đây.

onblur

Thí dụ

Đúng

Cú pháp

Hãy tự mình thử »

Thí dụ

Thêm ví dụ "hãy thử nó" dưới đây.

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

Sự kiện Onblur xảy ra khi một đối tượng mất tập trung.
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);

Sự kiện Onblur thường được sử dụng với mã xác thực biểu mẫu (ví dụ: khi người dùng rời khỏi trường biểu mẫu).
  document.getElementById("myInput").style.backgroundColor = "yellow";
}

Mẹo: Sự kiện Onblur là đối nghịch với sự kiện OnF Focus.
  document.getElementById("myInput").style.backgroundColor = "";
}

Hãy tự mình thử »

Thí dụ

Thêm ví dụ "hãy thử nó" dưới đây.

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

Sự kiện Onblur xảy ra khi một đối tượng mất tập trung.
var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);

Sự kiện Onblur thường được sử dụng với mã xác thực biểu mẫu (ví dụ: khi người dùng rời khỏi trường biểu mẫu).
  document.getElementById("myInput").style.backgroundColor = "yellow";
}

Mẹo: Sự kiện Onblur là đối nghịch với sự kiện OnF Focus.
  document.getElementById("myInput").style.backgroundColor = "";
}

Hãy tự mình thử »

Sử dụng trình xử lý sự kiện Onblur

Bây giờ chúng tôi sẽ giới thiệu hai trình xử lý sự kiện, đặc biệt là cho các biểu mẫu, được sử dụng phổ biến khi thực hiện xác nhận biểu mẫu.

Trình xử lý sự kiện bổ sung cho các biểu mẫu

Thực hiện JavaScript bất cứ khi nào ai đó nhấp vào nút "Gửi".

Ok, bạn cần làm rõ. Onblur được sử dụng khi bạn muốn kiểm tra từng phần tử (tức là: Text, hộp textarea) riêng lẻ và yêu cầu người dùng sửa đầu vào trước khi chuyển sang hộp tiếp theo. Sự kiện khác, ONSubmit, xác nhận biểu mẫu ở cuối, khi người dùng nhấn nút gửi. Tôi thích sau này, nhưng nó tùy thuộc vào bạn.

Ok, hãy xem chính xác cách thức hoạt động của Onblur. Chúng tôi sẽ viết một tập lệnh kiểm tra hộp văn bản đầu tiên và yêu cầu sửa ngay khi văn bản đã được nhập và người dùng chuyển trọng tâm sang một hộp khác (giả sử người đó đã nhập dữ liệu "sai".) : (Try entering something without the "@", and you'll get a alert telling you to re-enter the data as you proceed to the Feedback box.)

Feedback please:

Nhập địa chỉ email của bạn: (thử nhập một cái gì đó mà không có "@" và bạn sẽ nhận được cảnh báo bảo bạn nhập lại dữ liệu khi bạn tiến hành hộp phản hồi.)

• Ok, hãy xem những gì bên trong các thẻ.
• Chúng tôi đã xác định một chức năng gọi là emailcheck() sẽ được gọi bởi trình xử lý sự kiện onblur khi người dùng nhấp vào nơi khác khỏi phần tử đó.
• Chúng tôi đã sao chép giá trị của hộp vào "String1". Tại sao? Đơn giản là để tham khảo dễ dàng hơn, bạn không cần phải làm điều này.
  "string1.indexOf("@")==-1" in the code? Well, first of all, you need to understand that all data entered into a text, text area box are strings. For ex, "Hello there" or "12343" are strings, 12343 is a number. Now, here is the surprise: string itself is also an object. If that's the case, that means it has methods/properties. One of the methods, you might have guessed it, is indexOf("the char you are looking for").Using this method, we can search every character within a string and look for what we want. If it finds it will return the position of the char within the string. If it doesn't, it will return -1. Therefore, "string1.indexOf("@")==-1" basically means: "if @ is not in the string, do this:
  alert("Please input a valid email address!")
  document.example.email.focus()
  What's the thing in red? Well, focus() is a method of the text box, which basically forces the cursor to be at the specified text box, which is like the user clicking inside the text box with the mouse. Why do we need this? If we didn't, the only thing the user that entered bad data will see is the message "Please input a valid email address!" but THEN still allowed to move on onto the second box and submit the form. That's merely a slap on the face, and will not truly screen out those that are determined to not follow the rules. However, if we use the focus() method, the focus will be set back to the box containing errors, and will only allow users to proceed after it has been corrected.
• Đây không phải là một xác thực bằng chứng ngu ngốc ... Trên thực tế, bạn có thể nhập "@sprynet" và thoát khỏi nó. Tuy nhiên, điều đó luôn có thể được sửa chữa!

Nếu bạn đã chơi xung quanh với trình xử lý sự kiện onblur, ngay cả khi chỉ đơn giản là ví dụ trên, bạn có thể nhận thấy rằng đôi khi nó có thể rất khó chịu; Cách tốt hơn là chỉ cần trì hoãn việc kiểm tra cho đến khi người dùng nhấn nút gửi và kiểm tra tất cả các lỗi trong một muỗng. Đó là nơi người xử lý onsubmit đến.

• Giới thiệu hướng dẫn
• Mô hình đối tượng của JavaScript
• Truy cập các biểu mẫu bằng JavaScript
• Giới thiệu về các biểu mẫu xác thực
• Sử dụng trình xử lý sự kiện Onblur
• Sử dụng trình xử lý sự kiện onsubmit

Làm thế nào để bạn xác nhận trên Blur?

Trong tình huống nào bạn sẽ áp dụng phương thức JavaScript Blur () cho một phần tử biểu mẫu web?

Có bong bóng sự kiện mờ?

Làm thế nào các sự kiện mờ có thể được ngăn chặn?