confirm()函数是JavaScript中常用的确认框(弹出框)函数之一,可以使用该函数显示一个询问是否确认执行某项操作的对话框,并根据用户的响应(点击确认或取消按钮)返回不同的结果。
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()用法实例详解
基础教程推荐
- js中的如何定位固定层的位置 2024-01-08
- ajax用json实现数据传输 2023-01-31
- javascript中bind函数的作用实例介绍 2023-12-01
- echarts中X轴显示特定个数label并修改样式的方法详 2022-08-31
- selenium+python自动化测试之页面元素定位 2023-12-20
- html5实现移动端适配完美写法 2022-09-16
- VueJs单页应用实现微信网页授权及微信分享功能示例 2024-01-04
- Ajax实现智能提示搜索功能 2023-01-20
- 关于Ajax异步请求后台数据进行动态分页功能 2023-02-15
- Ajax jsonp跨域请求实现方法 2022-10-18