关于JavaScript 中的preventDefault() 方法，无效??!!

如果preventDefault()方法无效，可能是因为它被应用在了错误的元素上。在JavaScript中，preventDefault()方法是用来阻止某个事件的默认行为，比如阻止表单提交或超链接跳转。但是，这个方法必须要应用在正确的元素上。

例如，如果你想要阻止表单提交，那么preventDefault()方法必须要在表单的submit事件上应用。如果你应用在了表单的click事件上，那么就会无效。

此外，还可能是因为代码中有其他的错误导致preventDefault()方法无效。你可以检查一下代码中是否存在语法错误或其他逻辑错误。如果你还有其他疑问，欢迎继续提问。

相关问题

element-ui.common.js:13762 Unable to preventDefault inside passive event listener invocation

这个警告通常是由于在被动事件监听器中调用了preventDefault()方法而引起的。这是因为在被动事件监听器中，preventDefault()方法被视为无效，因此会引发警告。要解决这个问题，可以采取以下方法：

1.在添加事件监听器时，将{ passive: false }选项添加到选项对象中，以明确指定事件监听器是主动的，而不是被动的。例如：

element.addEventListener('touchstart', onTouchStart, { passive: false });

2.如果您使用的是Vue.js框架，则可以在组件的mounted()钩子函数中添加以下代码：

mounted() {
  this.$nextTick(() => {
    const el = this.$el.querySelector('.your-element-class');
    el.addEventListener('touchstart', this.onTouchStart, { passive: false });
  });
},

这将确保在组件挂载后添加事件监听器，并将选项设置为{ passive: false }。

3.如果您使用的是element-ui库，则可能需要更新库的版本，以便解决这个问题。您可以尝试升级到最新版本，或者查看库的文档以获取更多信息。

JavaScript设计表单并实现输入验证

首先，我们需要在 HTML 中设计表单，如下所示：

<form>
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name"><br>

  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email"><br>

  <label for="password">密码:</label>
  <input type="password" id="password" name="password"><br>

  <label for="confirm-password">确认密码:</label>
  <input type="password" id="confirm-password" name="confirm-password"><br>

  <input type="submit" value="提交">
</form>

现在，我们需要使用 JavaScript 来实现对输入的验证。我们可以在 `submit` 事件上添加监听器，然后使用 `preventDefault()` 方法来阻止表单提交，如果表单输入无效，我们将显示错误消息。

const form = document.querySelector('form');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const confirmPasswordInput = document.getElementById('confirm-password');

form.addEventListener('submit', e => {
  e.preventDefault();

  if (nameInput.value === '') {
    showError(nameInput, '姓名不能为空');
  } else {
    showSuccess(nameInput);
  }

  if (emailInput.value === '') {
    showError(emailInput, '邮箱不能为空');
  } else if (!isValidEmail(emailInput.value)) {
    showError(emailInput, '邮箱格式不正确');
  } else {
    showSuccess(emailInput);
  }

  if (passwordInput.value === '') {
    showError(passwordInput, '密码不能为空');
  } else {
    showSuccess(passwordInput);
  }

  if (confirmPasswordInput.value === '') {
    showError(confirmPasswordInput, '确认密码不能为空');
  } else if (passwordInput.value !== confirmPasswordInput.value) {
    showError(confirmPasswordInput, '两次输入的密码不一致');
  } else {
    showSuccess(confirmPasswordInput);
  }
});

function showError(input, message) {
  const formControl = input.parentElement;
  formControl.className = 'form-control error';
  const errorMessage = formControl.querySelector('small');
  errorMessage.innerText = message;
}

function showSuccess(input) {
  const formControl = input.parentElement;
  formControl.className = 'form-control success';
}

function isValidEmail(email) {
  const re = /\S+@\S+\.\S+/;
  return re.test(email);
}

在上面的代码中，我们定义了 `showError()` 和 `showSuccess()` 函数，用于在表单输入验证时显示错误或成功的消息。这些函数会根据表单输入的验证结果设置相应的 CSS 类名。

我们还定义了一个 `isValidEmail()` 函数用于验证电子邮件地址的格式。在表单提交时，我们将逐个验证每个输入字段，并根据需要调用 `showError()` 或 `showSuccess()` 函数。

最后，我们需要为表单的每个输入字段添加一个带有 `form-control` 类名的父元素。此外，我们还需要为这些父元素添加一个用于显示错误消息的 `small` 元素，如下所示：

<div class="form-control">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name">
  <small></small>
</div>