知识问答

利用JS提交表单的几种方法和验证

发布时间：2026-05-09 23:53:27 浏览量：0

下面是关于“利用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');});