JavaScript中的表单验证和表单操作

翻滚的胖子
2023-06-17 09:48:45
JavaScript Java

本文主要介绍JavaScript中的表单验证和表单操作，详细讲解函数、函数细节用法参数，附带对应的代码案例，适合编程小白阅读学习。

一、表单验证

表单验证是Web开发中非常重要的一部分，它可以帮助我们确保用户输入的数据符合我们的要求。下面我们来介绍一下JavaScript中的表单验证。

1.1 必填项验证

当我们需要确保表单中某些字段不能为空时，可以使用以下代码：

function checkRequired(inputId) {
  var inputElement = document.getElementById(inputId);
  if(inputElement.value === '') {
    alert('该项为必填项');
    return false;
  }
  return true;
}

其中，checkRequired函数接收一个参数inputId，表示需要验证的表单项的id。函数内部首先获取到该表单项的元素，并判断其value是否为空。如果为空，弹出提示框并返回false，否则返回true。

1.2 邮箱格式验证

当我们需要确保表单中某些字段的格式正确时，可以使用以下代码：

function checkEmail(inputId) {
  var emailReg = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
  var inputElement = document.getElementById(inputId);
  if(!emailReg.test(inputElement.value)) {
    alert('请输入正确的邮箱格式');
    return false;
  }
  return true;
}

其中，checkEmail函数接收一个参数inputId，表示需要验证的表单项的id。函数内部首先定义一个正则表达式emailReg，表示邮箱格式的规则。然后获取到该表单项的元素，并判断其value是否符合邮箱格式。如果不符合，弹出提示框并返回false，否则返回true。

二、表单操作

表单操作是Web开发中另一个非常重要的部分，它可以帮助我们实现对表单数据的获取、设置和提交等功能。下面我们来介绍一下JavaScript中的表单操作。

2.1 获取表单数据

当我们需要获取表单中某些字段的数据时，可以使用以下代码：

function getFormData(formId) {
  var formElement = document.getElementById(formId);
  var formData = {};
  for(var i = 0; i < formElement.elements.length; i++) {
    var element = formElement.elements[i];
    if(element.name) {
      formData[element.name] = element.value;
    }
  }
  return formData;
}

其中，getFormData函数接收一个参数formId，表示需要获取数据的表单的id。函数内部首先获取到该表单的元素，并定义一个空对象formData。然后遍历该表单下的所有元素，如果该元素有name属性，就将其name和value存入formData对象中。最后返回formData对象。

2.2 设置表单数据

当我们需要设置表单中某些字段的数据时，可以使用以下代码：

function setFormData(formId, data) {
  var formElement = document.getElementById(formId);
  for(var key in data) {
    if(formElement[key]) {
      formElement[key].value = data[key];
    }
  }
}

其中，setFormData函数接收两个参数，分别是表单的id和需要设置的数据对象data。函数内部首先获取到该表单的元素，然后遍历数据对象，如果该数据项在表单中有对应的元素，就将该元素的value设置为该数据项的值。

2.3 提交表单数据

当我们需要提交表单数据时，可以使用以下代码：

function submitFormData(formId, url) {
  var formData = getFormData(formId);
  var xhr = new XMLHttpRequest();
  xhr.open('POST', url, true);
  xhr.setRequestHeader('Content-type', 'application/json;charset=UTF-8');
  xhr.send(JSON.stringify(formData));
}

其中，submitFormData函数接收两个参数，分别是表单的id和提交数据的URL。函数内部首先调用getFormData函数获取表单数据，然后创建一个XMLHttpRequest对象并调用其open方法设置请求方式、URL和异步标识。接着调用setRequestHeader方法设置请求头部信息，最后调用send方法发送数据。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com