JS确认框 confirm() 用法实例详解

简介

confirm()函数是JavaScript中常用的确认框（弹出框）函数之一，可以使用该函数显示一个询问是否确认执行某项操作的对话框，并根据用户的响应（点击确认或取消按钮）返回不同的结果。

语法

confirm()函数的语法格式如下：

confirm(message)

其中，message参数是对话框中显示的消息内容文本，可以是一个字符串值。

当用户点击确认按钮时，该函数返回true；当用户点击取消按钮时，该函数返回false。

示例说明

示例 1：根据用户响应提示不同的消息

下面的示例演示了如何根据用户在确认对话框中的响应，显示不同的提示消息。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS确认框 confirm() 用法示例</title>
  </head>
  <body>
    <button onclick="showMessage()">显示消息</button>

    <script>
      function showMessage() {
        // 显示确认对话框，并根据用户的响应，显示不同的提示消息
        if (confirm('您确定要删除吗？')) {
          alert('删除成功！');
        } else {
          alert('已取消删除！');
        }
      }
    </script>
  </body>
</html>

在该示例中，当用户点击“显示消息”按钮时，将会出现一个确认对话框，询问用户是否要删除内容。如果用户点击了确认按钮，将会弹出一个“删除成功！”提示框；如果用户点击了取消按钮，则弹出一个“已取消删除！”提示框。

示例 2：通过表单验证确认是否提交

下面的示例演示了在提交表单时，如何通过使用confirm()函数来验证表单内容，并询问用户是否要确认提交表单。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>提交表单时确认是否提交</title>
  </head>
  <body>
    <form onsubmit="return confirmBeforeSubmit()">
      <div>
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name">
      </div>
      <div>
        <label for="age">年龄：</label>
        <input type="number" id="age" name="age" min="1" max="120">
      </div>
      <div>
        <input type="submit" value="提交">
      </div>
    </form>

    <script>
      function confirmBeforeSubmit() {
        // 获取表单数据
        var name = document.getElementById('name').value;
        var age = document.getElementById('age').value;

        // 验证表单数据
        if (name && age >= 18 && age <= 60) {
          // 确认提交表单
          return confirm('请确认提交表单！');
        } else {
          // 表单数据不符合要求，不提交表单
          alert('表单数据不符合要求！');
          return false;
        }
      }
    </script>
  </body>
</html>

在该示例中，当用户点击表单“提交”按钮时，将会触发confirmBeforeSubmit()函数，该函数会根据表单中填写的姓名和年龄，验证表单数据是否符合要求：姓名不能为空，年龄必须在18岁到60岁之间。如果表单数据符合要求，将会通过confirm()函数询问用户是否要确认提交表单。如果用户点击了确认按钮，则表单将会提交；如果用户点击了取消按钮，则不会提交表单。如果表单数据不符合要求，则会弹出一个“表单数据不符合要求！”的提示框，且不会提交表单。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js确认框confirm()用法实例详解 - Python技术站