javascript表单是否为空验证方法

2023年6月10日下午6:38 • JavaScript

当我们在网站开发中使用表单时，需要对用户输入进行验证，以确保数据的完整性和合法性。下面，我将为大家介绍一种实现JavaScript表单是否为空验证方法的攻略。

1. HTML表单

首先，我们需要在HTML文件中创建一个表单：

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">

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

  <button type="submit">提交</button>
</form>

在这个表单中，包含了用户名和密码两个输入框，还有一个提交按钮。

2. JavaScript验证

接下来，我们需要编写验证代码。根据需求，我们需要验证用户名和密码是否为空。

const form = document.querySelector('form');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');

form.addEventListener('submit', (event) => {
  event.preventDefault(); // 取消默认提交行为

  const usernameValue = usernameInput.value;
  const passwordValue = passwordInput.value;

  if (!usernameValue) {
    alert('用户名不能为空！');
    return;
  }

  if (!passwordValue) {
    alert('密码不能为空！');
    return;
  }

  // 执行正常提交行为
  form.submit();
});

在代码中，我们首先通过document.querySelector、document.getElementById等方法获取HTML元素，然后给表单的提交按钮添加了submit事件监听器。当用户点击提交按钮时，我们会取消默认的提交行为（因为我们需要手动验证），并且获取了用户名和密码输入框中的值。接着，我们使用if语句判断用户名和密码是否为空，如果为空，则弹出提示框阻止提交。否则，正常提交表单。

3. 示例说明

示例1

在上面的代码中，我们使用了alert弹出提示框来提醒用户输入是否为空。下面是一个示例，演示如何使用更美观、交互更友好的提示框。

function showError(input, message) {
  const formControl = input.parentElement;
  formControl.classList.add('error');
  const errorMessage = formControl.querySelector('small');
  errorMessage.innerText = message;
}

function showSuccess(input) {
  const formControl = input.parentElement;
  formControl.classList.remove('error');
}

function validateUsername(usernameInput) {
  if (usernameInput.value.trim() === '') {
    showError(usernameInput, '用户名不能为空！');
  } else {
    showSuccess(usernameInput);
  }
}

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

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

  validateUsername(usernameInput);
  validatePassword(passwordInput);

  const formControlError = form.querySelector('.error');
  if (!formControlError) {
    form.submit();
  }
});

在这个例子中，我们定义了三个函数：showError、showSuccess和validateUsername，通过这些函数控制样式的改变和提示消息的显示。当输入为空时，我们会在该表单输入框下方显示一条错误提示。

同时，我们在validateUsername和validatePassword中对输入框的值进行了trim，这样我们能够更客观地判断输入框是否为空。

示例2

在某些情况下，我们可能需要一次性验证多个表单。下面是一个多表单验证的示例：

const form = document.querySelector('form');
const inputs = form.querySelectorAll('input');

function showError(input) {
  const formControl = input.parentElement;
  formControl.classList.add('error');
  const errorMessage = formControl.querySelector('small');
  errorMessage.innerText = `${input.name}不能为空！`;
}

function showSuccess(input) {
  const formControl = input.parentElement;
  formControl.classList.remove('error');
}

function validateInput(input) {
  if (input.value.trim() === '') {
    showError(input);
  } else {
    showSuccess(input);
  }
}

function validateForm(inputs) {
  inputs.forEach((input) => {
    validateInput(input);
  });

  const formControlError = form.querySelector('.error');
  if (!formControlError) {
    form.submit();
  }
}

form.addEventListener('submit', (event) => {
  event.preventDefault(); 
  validateForm(inputs);
});

在这个例子中，我们使用了querySelectorAll方法获取了所有的输入框，然后在validateForm函数中循环执行validateInput函数，验证每一个输入框。

当所有输入框都验证完毕后，我们会判断是否有出现错误的输入框，如果没有，就执行正常提交行为。