利用JS提交表单的几种方法和验证(必看篇)

下面是关于“利用JS提交表单的几种方法和验证”的完整攻略：

1. 提交表单的几种方法

1.1 提交按钮直接调用submit方法

当在表单中设置了type="submit"的按钮，在点击按钮时，会自动提交表单。同时，我们也可以通过js手动触发按钮的点击事件，从而提交表单。

例如，我们有一个表单：

<form id="myForm" action="/submit-form" method="post">
  <input type="text" name="username">
  <input type="text" name="password">
  <button type="submit" id="submitButton">提交</button>
</form>

那么，我们可以通过以下js代码手动提交表单：

document.querySelector('#submitButton').click(); // 触发按钮的点击事件

1.2 使用XMLHttpRequest对象提交表单

除了通过按钮提交表单外，我们还可以使用XMLHttpRequest对象，通过ajax的方式提交表单。这种方式相对来说更灵活一些，我们可以在提交表单前对表单数据进行处理、修改等。

以下是示例代码：

// 获取表单元素
const form = document.querySelector('#myForm');
// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
// 设置请求方法、请求地址、是否异步等
xhr.open('POST', '/submit-form', true);
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 绑定load事件回调函数
xhr.onload = function () {
  // 请求完成后的操作
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log('请求成功');
    console.log(xhr.responseText);
  } else {
    console.log('请求失败');
  }
};
// 获取表单数据
const formData = new FormData(form);
// 发送请求
xhr.send(formData);

2. 表单验证

为了防止用户输入不合法的数据，我们需要对表单进行验证。表单验证可以分为两种，一种是前端验证，即在用户输入数据时通过JavaScript进行验证；另一种是后端验证，在提交表单数据到后台时进行验证。

2.1 前端验证

前端验证主要是为了用户体验，防止用户在提交表单时出现错误。

以下是一个验证用户名和密码的示例代码：

<form id="myForm" onsubmit="return validateForm()" action="/submit-form" method="post">
  <input type="text" name="username" id="usernameInput">
  <input type="password" name="password" id="passwordInput">
  <button type="submit">提交</button>
</form>

<script>
function validateForm () {
  // 获取输入框的值
  const username = document.querySelector('#usernameInput').value;
  const password = document.querySelector('#passwordInput').value;
  // 验证规则
  const usernameRule = /^[a-zA-Z]\w{5,17}$/; // 字母开头，允许字母数字下划线，6-18位
  const passwordRule = /^[a-zA-Z]\w{5,17}$/; // 同上
  // 验证用户名
  if (!usernameRule.test(username)) {
    alert('用户名格式不正确');
    return false;
  }
  // 验证密码
  if (!passwordRule.test(password)) {
    alert('密码格式不正确');
    return false;
  }
  // 验证通过
  return true;
}
</script>

2.2 后端验证

后端验证是为了保证服务器接收到的数据是合法的，在前端验证通过后，我们还需要对数据进行再次验证。

以下是一个使用Node.js和Express框架对表单数据进行后端验证的示例代码：

const express = require('express');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.urlencoded({ extended: true }));

app.post('/submit-form', function (req, res) {
  // 获取表单数据
  const username = req.body.username;
  const password = req.body.password;
  // 验证用户名
  const usernameRule = /^[a-zA-Z]\w{5,17}$/;
  if (!usernameRule.test(username)) {
    res.status(400).send('用户名格式不正确');
    return;
  }
  // 验证密码
  const passwordRule = /^[a-zA-Z]\w{5,17}$/;
  if (!passwordRule.test(password)) {
    res.status(400).send('密码格式不正确');
    return;
  }
  // 数据验证通过
  // TODO：进行数据库操作，写入数据等
  res.send('提交成功');
});

app.listen(3000, function () {
  console.log('Server running on http://localhost:3000');
});

以上就是关于“利用JS提交表单的几种方法和验证”的完整攻略，希望能对你有帮助。