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

当preventDefault()方法无效时，通常是因为以下原因之一：

1.事件绑定不正确：preventDefault()方法只能在正确绑定事件的情况下有效。确保您已正确绑定事件。

2.事件对象不存在：preventDefault()方法需要事件对象作为参数。如果事件对象不存在，则无法调用该方法。确保您的事件处理程序接收到事件对象。

3.事件已经被取消：如果在事件处理程序中已经调用了preventDefault()方法或其他类似的方法来取消事件，则再次调用preventDefault()方法将无效。

4.浏览器不支持：在某些旧版本的浏览器中，preventDefault()方法可能不起作用。确保您的浏览器支持该方法。

如果您排除了以上原因，但preventDefault()方法仍然无效，请尝试使用return false;语句来取消事件。例如：

document.getElementById("myLink").onclick = function(event) {
  // 阻止链接的默认行为
  event.preventDefault();
  // do something else
  return false;
};

以上代码将阻止链接的默认行为，并返回false，以便取消事件。

相关问题

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>