xác nhận () là một hàm cơ bản của JavaScript nổi tiếng.
Nhiều hành động của người dùng cần được xác nhận nếu thay đổi sẽ là vĩnh viễn. Ví dụ: thao tác xóa chức năng CRUD.
Nó cần được xác nhận từ người dùng trước khi xóa vĩnh viễn dữ liệu.
Hướng dẫn này sẽ giải thích thêm về khái niệm cơ bản về JavaScript này với các ví dụ.
Mục lục
Ví dụ nhanh
Ví dụ nhanh này cho thấy tập lệnh JS để thực hiện những việc sau.
- Nó hiển thị một hộp xác nhận với thông báo đồng ý được chuyển làm đối số cho hàm xác nhận ().
- Nó xử lý các tùy chọn có hoặc không dựa trên nhấp chuột của người dùng vào nút OK hoặc ‘hủy bỏ’ của hộp xác nhận.
if (confirm('Are you sure?')) {
//action confirmed
console.log('Ok is clicked.');
} else {
//action cancelled
console.log('Cancel is clicked.');
}
Các điểm chính của hộp xác nhận javascript.
Hộp xác nhận JavaScript là hộp đồng ý để cho phép người dùng xác nhận hoặc hủy hành động gần đây.
Hàm xác nhận () của Javascript chấp nhận một thông báo tùy chọn được hiển thị trên hộp đồng ý.
Nó cũng hiển thị các nút Đồng ý và ‘Hủy bỏ’ để cho phép người dùng nói có hoặc không về sự đồng ý xác nhận.
Hàm này trả về một boolean thật hoặc sai dựa trên các lần nhấp vào nút trên hộp thoại xác nhận.
Cú pháp
confirm(message);
Ví dụ 2: Hiển thị hộp xác nhận JavaScript khi nhấp vào nút
Ví dụ này kết nối sự kiện khi nhấp chuột và trình xử lý JS được tạo để hiển thị hộp xác nhận.
Mã JS này chứa HTML để hiển thị hai nút “Chỉnh sửa” và “Xóa”. Mỗi có thuộc tính onClick để gọi trình xử lý tùy chỉnh JavaScript doAction ().
Trình xử lý này hiển thị hộp thoại xác nhận JavaScript và giám sát lựa chọn của người dùng giữa có và không. Chương trình này ghi lại hành động của người dùng dựa trên tùy chọn có hoặc không.
<button onClick='doAction("Edit", "Are you sure want to edit?");'>Edit</button>
<button onClick='doAction("Delete", "Delete will permanently remove the record. Are you sure?");'>Delete</button>
<script>
function doAction(action, message) {
if (confirm(message)) {
//If user say 'yes' to confirm
console.log(action + ' is confirmed');
} else {
//If user say 'no' and cancelled the action
console.log(action + ' is cancelled');
}
};
</script>
Ví dụ 3: Hộp thoại xác nhận cuộc gọi nội tuyến
Điều này gọi hàm xác nhận () nội dòng với thuộc tính HTML onClick.
Hầu hết thời gian JS nội tuyến của hộp thoại xác nhận gọi là phù hợp. Ví dụ: nếu không có lệnh gọi lại nào phải được thực hiện dựa trên tùy chọn có hoặc không của người dùng, thì phương pháp này sẽ hữu ích.
Trong ví dụ này, nó nhận được xác nhận của người dùng để gửi biểu mẫu đến phía máy chủ.
<form onSubmit="return confirm("Are you sure you want to send the data")">
<input type="text" name="q" />
<input type="submit" name="submit" value="Send" />
</form>
Ví dụ 4: Chuyển thông báo xác nhận bằng cách sử dụng thuộc tính dữ liệu
Ví dụ này chứa một tập lệnh JS để ánh xạ sự kiện nhấp của nút HTML để hiển thị hộp thoại xác nhận.
Nó giảm thiểu nỗ lực xác định các hàm JS và gọi chúng với phần tử để hiển thị xác nhận JavaScript.
Nó đơn giản hóa số dòng trong mã. Nó thêm trình xử lý sự kiện khi nhấp cho mỗi phần tử nút được hiển thị trong HTML.
Nó sử dụng JavaScript forEach để lấy đối tượng nút đích cho ánh xạ sự kiện này. Trên mỗi sự kiện khi nhấp chuột, nó gọi hàm xác nhận () để hiển thị hộp thoại.
<button data-confirm-message="Are you sure want to edit?">Edit</button>
<button data-confirm-message="Delete will permanently remove the record. Are you sure?">Delete</button>
<script>
document.querySelectorAll('button').forEach(function(element) {
element.addEventListener('click', function(e) {
if(confirm(e.target.dataset.confirmMessage)) {
console.log("confirmed");
}
});
});
</script>
Thông tin thêm về hộp xác nhận JavaScript
Hộp xác nhận JavaScript là một loại hộp thoại. Nó yêu cầu hành động của người dùng để xác nhận hoặc hủy một hành động được kích hoạt gần đây. Nó là phương thức của đối tượng cửa sổ JavaScript.
Có nhiều chức năng hơn trong JavaScript để hiển thị hộp thoại với các điều khiển. Ví dụ,
- alert () – Hộp cảnh báo với tùy chọn Đồng ý.
- prompt () – Hộp thoại nhắc với một tùy chọn đầu vào.
Ghi chú:
Trong khi hiển thị hộp thoại JavaScript, nó sẽ dừng truyền cửa sổ bên ngoài hộp thoại.
Nói chung, hiển thị một cửa sổ hộp thoại trên một trang web không phải là một phương pháp hay. Nó sẽ tạo ra xích mích về phía người dùng cuối.
Chúng tôi đã thấy một hộp thoại tùy chỉnh sử dụng jQuery. Hãy cùng chúng tôi xem cách hiển thị hộp thoại xác nhận jQuery trong bài viết tiếp theo. Với hộp thoại tùy chỉnh, nó có lợi thế là thay thế các nút điều khiển mặc định.
Tải xuống