JS校验|极客笔记

JS校验

1. 简介

在网页开发过程中，为了提高用户体验和数据的可靠性，通常需要对用户输入的数据进行校验。JavaScript是一种强大的脚本语言，可以用来在客户端进行数据校验。通过JS校验，可以在用户提交表单之前对数据进行验证，以确保数据的准确性和完整性。

在本文中，我们将介绍一些常用的JS校验方法，包括验证输入框是否为空、验证邮箱地址格式、验证手机号码格式等。我们还会讨论如何结合正则表达式来进行更加高级的数据校验。

2. 验证输入框是否为空

在很多表单中，要求某些输入框是必填的，用户必须填写才能提交表单。我们可以通过JS校验来实现这一功能。

function checkEmpty(inputValue, inputName) {
  if (inputValue === "") {
    alert(inputName + "不能为空");
    return false;
  } else {
    return true;
  }
}

// 在提交按钮点击事件中调用该函数
function onSubmit() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  if (!checkEmpty(username, "用户名") || !checkEmpty(password, "密码")) {
    return false;
  }
}

在上面的代码中，我们定义了一个checkEmpty函数，用来验证输入框是否为空。如果输入框为空，会弹出一个提示框提示用户该输入框不能为空。在提交按钮的点击事件中，我们调用了onSubmit函数，对用户名和密码进行了非空验证。

3. 验证邮箱地址格式

在很多表单中，需要用户填写邮箱地址。为了确保用户填写的是正确的邮箱地址，我们可以通过JS校验来验证邮箱地址格式。

function checkEmail(email) {
  var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
  if (!reg.test(email)) {
    alert("请输入正确的邮箱地址");
    return false;
  } else {
    return true;
  }
}

// 在提交按钮点击事件中调用该函数
function onSubmit() {
  var email = document.getElementById("email").value;

  if (!checkEmail(email)) {
    return false;
  }
}

在上面的代码中，我们定义了一个checkEmail函数，使用正则表达式来验证邮箱地址的格式是否正确。如果邮箱地址格式错误，会弹出一个提示框提示用户请输入正确的邮箱地址。在提交按钮的点击事件中，我们调用了onSubmit函数，对邮箱地址进行了格式验证。

4. 验证手机号码格式

在很多表单中，需要用户填写手机号码。为了确保用户填写的是正确的手机号码格式，我们可以通过JS校验来验证手机号码。

function checkPhone(phone) {
  var reg = /^1[3456789]\d{9}$/;
  if (!reg.test(phone)) {
    alert("请输入正确的手机号码");
    return false;
  } else {
    return true;
  }
}

// 在提交按钮点击事件中调用该函数
function onSubmit() {
  var phone = document.getElementById("phone").value;

  if (!checkPhone(phone)) {
    return false;
  }
}

在上面的代码中，我们定义了一个checkPhone函数，使用正则表达式来验证手机号码的格式是否正确。如果手机号码格式错误，会弹出一个提示框提示用户请输入正确的手机号码。在提交按钮的点击事件中，我们调用了onSubmit函数，对手机号码进行了格式验证。

5. 结合正则表达式进行高级校验

除了上述简单的数据校验，我们还可以结合正则表达式进行更加高级的校验。例如，验证密码强度是否符合要求。

function checkPassword(password) {
  var reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,20}$/;
  if (!reg.test(password)) {
    alert("密码必须包含数字、小写字母、大写字母，且长度在8-20位之间");
    return false;
  } else {
    return true;
  }
}

// 在提交按钮点击事件中调用该函数
function onSubmit() {
  var password = document.getElementById("password").value;

  if (!checkPassword(password)) {
    return false;
  }
}

在上面的代码中，我们定义了一个checkPassword函数，使用正则表达式来验证密码的强度是否符合要求。密码必须包含数字、小写字母、大写字母，且长度在8-20位之间。在提交按钮的点击事件中，我们调用了onSubmit函数，对密码进行了强度验证。