以 Promise 和 Confirm 提示框实现优雅的表单提交校验

Promise 是一种异步编程的解决方案，它提供了对异步操作的更简洁的语法。Confirm 提示框则是一种常见的前端交互组件，可以在网页中弹出确认提示框，让用户进行选择。

我们将使用 Promise 封装 Confirm 提示框，在表单提交前弹出提示框，让用户确认是否提交表单。如果用户选择“确定”，则提交表单；如果选择“取消”，则阻止表单提交。

首先，在 HTML 中创建表单，并在表单中添加一个提交按钮：

<form id="form">
  <input type="text" id="name" placeholder="姓名">
  <input type="email" id="email" placeholder="邮箱">
  <input type="submit" value="提交">
</form>

然后，在 JavaScript 中使用 Promise 封装 Confirm 提示框：

// 封装 Confirm 提示框
const confirm = (message) => {
  return new Promise((resolve, reject) => {
    const confirmed = window.confirm(message);
    if (confirmed) {
      resolve();
    } else {
      reject();
    }
  });
};

// 获取表单元素
const form = document.getElementById('form');

// 表单提交事件监听器
form.addEventListener('submit', (event) => {
  // 阻止默认表单提交行为
  event.preventDefault();

  // 获取表单数据
  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;

  // 使用 Confirm 提示框确认提交
  confirm('确认提交表单吗？').then(() => {
    // 如果用户选择“确定”，则提交表单
    form.submit();
  }).catch(() => {
    // 如果用户选择“取消”，则阻止表单提交
    alert('表单提交已取消。');
  });
});

在上面的代码中，我们使用 confirm() 函数封装了 Confirm 提示框，并将其作为 Promise 返回。当用户点击“提交”按钮时，我们首先调用 confirm() 函数，然后使用 .then() 和 .catch() 来处理用户的选择。如果用户选择“确定”，则调用 form.submit() 提交表单；如果用户选择“取消”，则弹出提示框，告知用户表单提交已取消。

这样，我们就可以使用 Promise 和 Confirm 提示框实现优雅的表单提交校验，让表单验证更加便捷、直观，同时保证用户体验。