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

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技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • 关于JavaScript命名空间的一些心得

    关于JavaScript命名空间的一些心得 JavaScript命名空间是一种管理和组织JavaScript代码的重要方式。通过使用命名空间,我们可以避免多个JavaScript库或插件之间的代码冲突和命名冲突。以下是关于JavaScript命名空间的一些心得: 什么是JavaScript命名空间? JavaScript命名空间是一种将相关的变量、函数和对象…

    JavaScript 2023年6月11日
    00
  • Electron应用显示隐藏时展示动画效果实例

    针对您提出的问题,我将给出一个详细的解答。下面将分成三个部分进行: 背景介绍 实例说明 总结 背景介绍 Electron 是一个基于 Chromium 和 Node.js 的开源框架,可以使用 HTML,CSS 和 JavaScript 构建跨平台的桌面应用程序。在 Electron 应用程序中,展示动画效果是很重要的一个方面,可以使应用程序更加生动和吸引人…

    JavaScript 2023年6月11日
    00
  • JavaScript动态添加style节点的方法

    动态添加style节点是JavaScript编程中经常会用到的技巧,它可以帮助我们在运行时修改网页的布局样式,从而实现动态渲染的效果。以下是完整攻略: 1. 创建style节点 要添加样式到网页中,首先需要创建一个style节点: const style = document.createElement(‘style’); 这行代码创建了一个全新的style…

    JavaScript 2023年6月10日
    00
  • 在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)

    让我们一步步来实现在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div,不改变iframe父窗口代码。 首先,我们需要在iframe里的页面编写js,并且通过iframe的parent对象进行与父窗口的交互。以下是大致的步骤: 在iframe页面中编写HTML代码和JS代码,创建一个可以进行展开和收缩的div,并设置好div的初始状态…

    JavaScript 2023年6月11日
    00
  • JavaScript结合HTML DOM实现联动菜单

    一、前言 JavaScript结合HTML DOM可实现动态操作HTML文档的功能,通常用于创建富交互网页。本文将讲解如何使用JavaScript结合HTML DOM实现联动菜单。 二、准备工作 在使用JavaScript结合HTML DOM实现联动菜单前,需准备如下工作: 编写HTML代码,包含两个或以上select控件,其中一个为主控控件,另外的为从属控…

    JavaScript 2023年6月10日
    00
  • JavaScript操作DOM对象详解

    JavaScript操作DOM对象详解 什么是DOM对象 DOM(Document Object Model,文档对象模型)是一种针对HTML和XML文档的编程接口,它将文档作为一个由节点和对象组成的结构,开发者可以使用DOM提供的API来操作这些节点和对象,从而将页面进行动态的更新。 DOM对象即是由浏览器解析HTML代码后生成的一组节点和对象的集合,这些…

    JavaScript 2023年5月27日
    00
  • javascript计算用户打开网页的停留时间

    要计算用户在网页的停留时间,最常用的方法是使用JavaScript。下面是一个完整的攻略: 步骤1:获取网页打开时间 用JavaScript获取网页打开的时间是很简单的。可以使用Date对象来获取当前时间,并将其存储在一个变量中。以下是一个示例代码块: var startTime = new Date().getTime(); 步骤2:获取用户离开网页的时间…

    JavaScript 2023年6月11日
    00
  • JavaScript实现返回顶部按钮案例

    下面详细讲解一下“JavaScript实现返回顶部按钮案例”的完整攻略。 1. 添加HTML代码和CSS样式 首先在HTML文件中添加返回顶部按钮的HTML代码,例如: <a href="#" id="back-to-top" title="返回顶部"> <i class=&quo…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部