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日

相关文章

  • 图片的左右移动,js动画效果实现代码

    图片左右移动是一种常见的动画特效,通常用于网站的广告展示或轮播图中。实现这种特效需要使用JavaScript的动画效果。 下面是通过步骤来讲解如何实现图片的左右移动。 步骤1:创建HTML文件和CSS样式 首先,我们需要创建一个HTML文件并在其中创建一个图片元素。然后,我们需要使用CSS样式表来定义图片的样式,包括宽度和高度,以及它的左右位置等属性。 下面…

    JavaScript 2023年6月11日
    00
  • JS使用Chrome浏览器实现调试线上代码

    JS使用Chrome浏览器实现调试线上代码 背景概述 开发者在线上部署的代码出现问题时,需要及时定位问题。然而,线上代码的环境不同于本地开发环境,部署过程中也可能出现各种问题,使线上代码难以调试。因此,如何使用调试工具,在线上环境快速定位问题,显得尤为重要。 工具准备 Chrome浏览器 由于Chrome浏览器功能齐全,且被广大开发者喜爱,因此在本文中,我们…

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

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

    JavaScript 2023年6月10日
    00
  • vue路由实现登录拦截

    vue路由实现登录拦截是常见的前端开发技巧之一,有利于确保用户访问权限的安全性。下面我将为大家介绍如何利用vue路由实现登录拦截。具体步骤如下: 1. 使用vue-router实现路由拦截 在Vue Router中,可以通过导航钩子函数实现路由拦截,拦截器可以在跳转之前或之后执行一些操作,例如更改路由,验证用户权限等。 前置守卫(beforeEach) 在跳…

    JavaScript 2023年6月11日
    00
  • JS使用eval()动态创建变量的方法

    JS使用eval()动态创建变量的方法是通过将字符串转换为可执行代码来实现的。下面是具体步骤: 使用eval()函数将字符串转为可执行的代码。 在代码中定义变量,这些变量名需要作为字符串传递给eval()函数。 在定义变量时,可以根据需要赋初始值或在后续代码中修改变量的值。 下面是两个示例说明: 示例一: // 动态创建两个变量 var var1 = &qu…

    JavaScript 2023年5月28日
    00
  • JS自调用匿名函数具体实现

    Markdown 格式: JS自调用匿名函数的完整实现攻略 在 JavaScript 中,为了避免全局变量的污染以及保护代码的隐私,可以使用自调用匿名函数的方式来定义模块。下面是自调用匿名函数的具体实现方式。 基本形式 自调用匿名函数的基本形式如下: (function(){ // code here })(); 该函数定义了一个匿名函数并立即执行,参数列表…

    JavaScript 2023年6月11日
    00
  • JavaScript中的事件循环机制及其运行原理

    JavaScript中的事件循环机制及其运行原理 JavaScript是一种单线程语言,这意味着一次只能执行一个任务。但是,JavaScript中有许多异步操作(例如网络请求、定时器等)需要在后台执行而不会阻塞代码运行,这就是事件循环机制的作用。 事件循环机制的基本概念 事件循环是JavaScript的一个重要特性,它基于一个简单的原理:执行栈为空时,Jav…

    JavaScript 2023年6月11日
    00
  • Javascript 的addEventListener()及attachEvent()区别分析

    JavaScript 是一门用于网页前端开发的脚本语言,常常用于实现交互效果。而事件是页面上用户与页面交互时所发生的事情,例如用户单击、鼠标移动等。在 JavaScript 中,操作事件的方式主要有两种:addEventListener() 和 attachEvent()。本篇攻略将会对它们的区别进行分析与讲解。 addEventListener() add…

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