javascript中确认框

在JavaScript中，确认框（confirm box）是常用的一种弹出式对话框，用于提示用户或获取用户对某项操作的确认。确认框通常由一个文本和两个按钮组成，分别为“确定”和“取消”按钮。用户可以选择点击其中一个按钮，以确定是否执行操作。

下面我们来看一个简单的例子：

if(confirm("你确定要删除这个文件吗？")) {
// 执行删除操作}
 else {
// 取消删除操作}
    

在上面的代码中，我们使用了confirm函数来创建一个确认框。confirm函数接受一个字符串参数，用于在弹出框中显示需要确认的信息。如果用户点击“确定”按钮，则confirm函数返回true；如果用户点击“取消”按钮，则返回false。根据confirm函数的返回值，我们可以执行相应的操作。

除了可以用于确认删除操作等场景，确认框还可以用于验证用户输入。例如，在提交表单前，我们可以使用确认框来提醒用户是否确认提交：

var form = document.querySelector('form');
form.addEventListener('submit', function(event) {
if(!confirm("你确定要提交表单吗？")) {
    event.preventDefault();
 // 阻止表单提交}
}
    );
    

在上面的代码中，我们为表单的submit事件添加了一个监听器。在监听器中，我们将确认框中的信息设置为“你确定要提交表单吗？”。如果用户点击“确定”按钮，表单将被提交；如果用户点击“取消”按钮，我们通过event.preventDefault()方法阻止表单的提交。

除了默认的“确定”和“取消”按钮，我们还可以通过confirm函数的第二个参数来设置自定义的按钮文本。例如：

var result = confirm("你爱学习吗？", "爱", "不爱");
if(result) {
    alert("好孩子，继续努力！");
}
 else {
    alert("谁让你不爱学习的？");
}

在上面的代码中，我们将确认框的第二个参数设置为“爱”和“不爱”，分别作为“确定”和“取消”按钮的文本。如果用户点击“爱”按钮，则confirm函数返回true；如果用户点击“不爱”按钮，则返回false。根据confirm函数的返回值，我们用alert函数弹出相应的信息。

当然，有时我们不需要显示“取消”按钮，或者需要对按钮进行样式设置等操作。这时，我们可以使用自定义弹出框库，如SweetAlert2、Bootstrap Modal等。这些库可以帮助我们创建更漂亮、更可定制的弹出式对话框。

在使用自定义弹出框库时，我们需要先引入库文件和相关依赖，然后按照库提供的方法创建弹出框。例如，使用SweetAlert2库：

Swal.fire({
title: '你爱学习吗？',icon: 'question',showCancelButton: true,confirmButtonText: '爱',cancelButtonText: '不爱'}
    ).then((result) =>
 {
if (result.isConfirmed) {
    Swal.fire('好孩子，继续努力！');
}
 else {
    Swal.fire('谁让你不爱学习的？');
}
}
    );
    

在上面的代码中，我们通过Swal.fire方法创建了一个弹出框。其中，title属性设置了弹出框的信息文本，icon属性设置了弹出框的图标（默认为“question”），showCancelButton属性设置了是否显示“取消”按钮，confirmButtonText和cancelButtonText属性分别设置了“确定”和“取消”按钮的文本。然后，我们通过then方法获取用户的选择结果，并根据结果弹出相应的信息。

在总结一下，确认框是JavaScript中常用的一种弹出式对话框，用于提示用户或获取用户对某项操作的确认。通过confirm函数，我们可以方便地创建一个默认样式的确认框。如果需要更多定制和样式设置，我们可以使用自定义弹出框库，如SweetAlert2、Bootstrap Modal等。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！