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在线编码查询工具”是一款web应用程序,可以用来编码和解码经常在javascript编程中使用的不同数据类型,比如文字、URL、base64等等。这个工具可以通过浏览器使用,不需要安装或者配置过程。下面我们来详细介绍如何使用这个工具。 使用步骤 打开 javascript在线编码查询工具网站:https://www.sojso…

    JavaScript 2023年5月20日
    00
  • SWFObject基本用法实例分析

    那么针对“SWFObject基本用法实例分析”的攻略,我会从以下几个方面着手进行详细讲解: SWFObject基本介绍 SWFObject的引入 SWFObject的基本用法 实例分析 结束语 接下来会一步步讲解,希望对您有所帮助。 1. SWFObject基本介绍 SWFObject是一个用于嵌入Flash对象的JavaScript库,使用SWFObjec…

    JavaScript 2023年6月11日
    00
  • js注册时输入合法性验证方法

    下面是详细的”js注册时输入合法性验证方法”攻略: 步骤一:获取注册表单中需要验证的DOM元素 在注册表单中,可能需要验证用户的姓名、邮箱、密码、确认密码等信息,我们需要获取这些DOM元素,方便后面使用。 <body> <form id="registerForm"> <div> <label f…

    JavaScript 2023年6月10日
    00
  • 浅谈regExp的test方法取得的值变化的原因及处理方法

    下面是“浅谈regExp的test方法取得的值变化的原因及处理方法”的完整攻略: 什么是regExp的test方法 RegExp是JavaScript中的正则表达式对象,test()是它的一个方法,用于测试一个字符串是否符合某个正则表达式的匹配规则。test()方法返回一个布尔值,如果符合规则则返回true,否则返回false。 let str = ‘abc…

    JavaScript 2023年6月10日
    00
  • 兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码

    若要开发一个能够在IE、FireFox、Chrome等浏览器上兼容的xml处理函数js代码,我们可以采用以下步骤: 创建一个xml解析函数 我们可以使用XMLHttpRequest对象来解析xml文件。不同的浏览器对这个对象的支持程度不同,所以我们需要在代码中加入相关兼容性的判断语句,以保证代码的兼容性。以下是一个兼容IE、FireFox、Chrome的xm…

    JavaScript 2023年5月27日
    00
  • 微信小程序 闭包写法详细介绍

    关于“微信小程序 闭包写法详细介绍”的攻略,我将按照以下的结构和内容进行详细讲解: 一、什么是闭包 闭包是JavaScript里的一个重要概念,它是指那些能够访问自由变量的函数。也就是说,闭包可以读取、修改函数内部的变量,并且这些变量在函数外部仍然可以被访问到。在实际的编程中,闭包通常被用来创建一些私有变量和私有方法,以实现封装的目的。 二、如何在微信小程序…

    JavaScript 2023年6月10日
    00
  • JavaScript实现构造json数组的方法分析

    下面是关于“JavaScript实现构造json数组的方法分析”的完整攻略: 什么是JSON? JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,常用于前后台数据传输。其本质上是一个JavaScript对象,可以包含多个属性和值,非常适合用于数组和对象的嵌套结构。 如何构造json数组? JSON数组由多个JSON对…

    JavaScript 2023年5月27日
    00
  • 在js文件中引入(调用)另一个js文件的三种方法

    在 JavaScript 中引入(调用)其他 JavaScript 文件的方式主要有以下三种: 1. 使用<script>标签引入(调用)其他 JavaScript 文件 使用<script>标签可以在 HTML 文件中引入(调用)其他 JavaScript 文件,该文件可以被浏览器直接加载。 <script>标签通常放在…

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