HoRain云--JavaScript表单操作全攻略-开发者社区

🎬 HoRain云小助手：个人主页

🔥 个人专栏: 《Linux 系列教程》《c语言教程》

⛺️生活的理想，就是为了理想的生活!

⛳️ 推荐

前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。

专栏介绍

专栏名称	专栏介绍
《C语言》	本专栏主要撰写C干货内容和编程技巧，让大家从底层了解C，把更多的知识由抽象到简单通俗易懂。
《网络协议》	本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘，一起解密网络协议在运行中协议的基本运行机制！
《docker容器精解篇》	全面深入解析 docker 容器，从基础到进阶，涵盖原理、操作、实践案例，助您精通 docker。
《linux系列》	本专栏主要撰写Linux干货内容，从基础到进阶，知识由抽象到简单通俗易懂，帮你从新手小白到扫地僧。
《python 系列》	本专栏着重撰写Python相关的干货内容与编程技巧，助力大家从底层去认识Python，将更多复杂的知识由抽象转化为简单易懂的内容。
《试题库》	本专栏主要是发布一些考试和练习题库（涵盖软考、HCIE、HRCE、CCNA等）

⛳️ 推荐

专栏介绍

JavaScript 表单：验证、提交与操作

JavaScript 提交表单（推荐方式）

JavaScript 表单：验证、提交与操作

JavaScript 表单是现代 Web 开发中不可或缺的部分，它使表单验证和交互更加灵活高效。以下是对 JavaScript 表单的全面介绍：

一、JavaScript 表单验证

基本验证方法

HTML 表单验证可以通过 JavaScript 来完成，常见于阻止无效表单提交：

function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == null || x == "") { alert("需要输入名字。"); return false; } }

在 HTML 中调用：

<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post"> 名字: <input type="text" name="fname"> <input type="submit" value="提交"> </form>

验证规则类型

常见的表单验证包括：

必填字段检查
电子邮件格式验证
数字范围验证
字符串长度验证
自定义模式匹配

现代验证方式

HTML5 约束验证：通过 HTML 属性实现自动验证（IE9+支持）：

<input type="text" name="fname" required> <input type="email" name="email" required>

CSS 伪类选择器：用于样式化验证状态：

:invalid { border-color: red; } :valid { border-color: green; }

验证库推荐

validatorjs- 轻量级库，支持多种验证规则

var Validator = require('validatorjs'); var data = { username: 'mike' }; var rules = { username: 'min:5|max:10|required' }; var validation = new Validator(data, rules);

Parsley.js- 提供丰富的表单验证功能
自定义验证库设计（参考知识库[1]）：

二、表单提交

传统 HTML 表单提交

标准 HTML 表单提交会加载新页面，导致整个页面刷新。

JavaScript 提交表单（推荐方式）

使用fetch()API 以编程方式提交数据，避免页面刷新：

document.getElementById('registrationForm').addEventListener('submit', function(event) { event.preventDefault(); // 阻止默认提交行为 // 创建 FormData 对象 const formData = new FormData(this); // 发送请求 fetch('/api/submit', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => { console.log('Success:', data); // 处理成功响应 }) .catch((error) => { console.error('Error:', error); // 处理错误 }); });

使用 FormData 对象

FormData接口自动处理数据编码：

文本数据：application/x-www-form-urlencoded
二进制数据：multipart/form-data

// 手动创建 FormData const formData = new FormData(); formData.append("name", "Pomegranate"); formData.append("file", file); // file 是 File 对象 // 从表单创建 FormData const formData = new FormData(document.getElementById('myForm'));

三、表单操作常用方法

获取表单元素

// 通过 name 属性 let myForm = document.forms["loginForm"]; // 通过 id let myForm = document.getElementById("loginForm"); // 通过表单元素访问控件 let username = myForm.elements["username"];

表单常用事件

// 表单提交事件 myForm.addEventListener('submit', function(event) { event.preventDefault(); // 处理提交 }); // 输入内容变化 document.getElementById('email').addEventListener('input', function() { // 实时验证 });

读取和设置表单值

// 读取值 let name = document.getElementById("username").value; // 设置值 document.getElementById("username").value = "新用户名"; // 处理复选框和单选框 if(document.getElementById("agree").checked) { // 处理选中状态 }