使用JavaScript的confirm方法|极客笔记

使用JavaScript的confirm方法

在网页开发中，经常会遇到需要用户确认的操作，比如删除数据或者提交表单。为了增强用户体验，我们可以使用JavaScript中的confirm方法来创建一个弹窗提示用户是否确认操作。本文将详细介绍confirm方法的用法及示例。

confirm方法的语法

confirm(message);

confirm方法接受一个参数，即弹窗中要显示的消息。当用户点击确认按钮时，confirm方法返回true；当用户点击取消按钮时，confirm方法返回false。

confirm方法的示例

下面我们通过几个示例来演示confirm方法的用法。

示例一：删除数据时进行确认

在这个示例中，我们通过点击按钮来触发一个弹窗，询问用户是否确认删除数据。

<!DOCTYPE html>
<html>
<head>
    <title>Confirm Example</title>
</head>
<body>
    <h1>Delete Data</h1>
    <button onclick="deleteData()">Delete</button>

    <script>
        function deleteData() {
            if(confirm("Are you sure you want to delete this data?")) {
                alert("Data deleted successfully!");
            } else {
                alert("Data deletion cancelled.");
            }
        }
    </script>
</body>
</html>

用户点击删除按钮后，将会出现一个确认弹窗，用户可以选择确认删除或取消删除。

示例二：提交表单时进行确认

在这个示例中，我们通过点击表单提交按钮来触发一个弹窗，询问用户是否确认提交表单。

<!DOCTYPE html>
<html>
<head>
    <title>Confirm Example</title>
</head>
<body>
    <h1>Submit Form</h1>
    <form onsubmit="return confirmForm()">
        <input type="text" name="name" placeholder="Name">
        <input type="email" name="email" placeholder="Email">
        <button type="submit">Submit</button>
    </form>

    <script>
        function confirmForm() {
            if(confirm("Are you sure you want to submit this form?")) {
                alert("Form submitted successfully!");
                return true;
            } else {
                alert("Form submission cancelled.");
                return false;
            }
        }
    </script>
</body>
</html>

用户填写完表单后，点击提交按钮将会出现一个确认弹窗，用户可以选择确认提交或取消提交。