updream 一键生成高质量推广成片 Laper 剧本策划到成片协作 AniShort AI短剧协同制作平台 Seko AI短剧一键生成成片

PHP MySQL jquery HTML CSS

JS教程 JS版本 JS对象 JS函数 JS类 JS Async JS HTML DOM JS Browser BOM JS Web API JS AJAX JS JSON JS vs jQuery JS图形 JS参考手册

简介使用输出语句语法注释变量 Let Const 运算符算数赋值数据类型函数对象事件字符串字符串方法字符串搜索字符串模板数字 BigInt 数字方法数字属性数组数组方法数组搜索数组排序数组迭代数组 Const 日期日期格式日期获取方法日期设置方法数学随机逻辑比较条件 Switch Loop For Loop For In Loop For Of Loop While Break 可迭代对象 Set Set 方法 Map Map 方法 typeof 类型转换解构位运算正则表达式运算符优先级异常作用域 Hoisting 严格模式 this 关键词箭头函数类模块 JSON 调试样式指南最佳实践错误性能保留词 JS 版本 JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS 2019 JS 2020 JS 2021 JS 2022 JS 2023 JS 2024 JS IE / Edge JS 历史对象定义对象属性对象方法对象显示对象访问器对象构造器对象原型对象引用函数定义函数参数函数调用函数 Call 函数 Apply 函数绑定闭包类简介类继承 Static 回调异步 Promise Async DOM 简介 DOM 方法 DOM 文档 DOM 元素 DOM HTML DOM 表单 DOM CSS DOM 动画 DOM 事件 DOM 事件监听程序 DOM 导航 DOM 节点 DOM 集合 DOM 节点列表 Window Screen Location History Navigator 弹出框 Timing Cookies Web API 简介 Web Form API Web History API Web Storage API Web Worker API Web Fetch API Web Geolocation API AJAX 简介 AJAX XMLHttp AJAX 请求 AJAX 响应 AJAX XML 文件 AJAX PHP AJAX ASP AJAX 数据库 AJAX 应用程序 AJAX 实例 JSON 简介 JSON 语法 JSON vs XML JSON 数据类型 JSON 解析 JSON 字符串化 JSON 对象 JSON 数组 JSON 服务器 JSON PHP JSON HTML JSON JSONP jQuery 选择器 jQuery HTML jQuery CSS jQuery DOM 图形 Canvas Plotly.js Chart 谷歌图表 D3.js 参考手册（类别排序）参考手册（字母排序）

JS教程

JS版本

JS 版本 JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS 2019 JS 2020 JS 2021 JS 2022 JS 2023 JS 2024 JS IE / Edge JS 历史

JS对象

对象定义对象属性对象方法对象显示对象访问器对象构造器对象原型对象引用

JS函数

函数定义函数参数函数调用函数 Call 函数 Apply 函数绑定闭包

JS类

类简介类继承 Static

JS Async

回调异步 Promise Async

JS HTML DOM

DOM 简介 DOM 方法 DOM 文档 DOM 元素 DOM HTML DOM 表单 DOM CSS DOM 动画 DOM 事件 DOM 事件监听程序 DOM 导航 DOM 节点 DOM 集合 DOM 节点列表

JS Browser BOM

Window Screen Location History Navigator 弹出框 Timing Cookies

JS Web API

Web API 简介 Web Form API Web History API Web Storage API Web Worker API Web Fetch API Web Geolocation API

JS AJAX

AJAX 简介 AJAX XMLHttp AJAX 请求 AJAX 响应 AJAX XML 文件 AJAX PHP AJAX ASP AJAX 数据库 AJAX 应用程序 AJAX 实例

JS JSON

JSON 简介 JSON 语法 JSON vs XML JSON 数据类型 JSON 解析 JSON 字符串化 JSON 对象 JSON 数组 JSON 服务器 JSON PHP JSON HTML JSON JSONP

JS vs jQuery

jQuery 选择器 jQuery HTML jQuery CSS jQuery DOM

JS图形

图形 Canvas Plotly.js Chart 谷歌图表 D3.js

JS参考手册

参考手册（类别排序）参考手册（字母排序）

JavaScript

更新时间2025-08-07

DOM HTML DOM CSS

JavaScript 表单验证

HTML 表单验证可以通过 JavaScript 完成。

如果表单域 (fname) 为空，该函数会提示一条消息，并返回 false，以防止表单被提交：

JavaScript 实例

function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}

提交表单时可以调用该函数：

HTML 表单实例

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

运行实例 »

点击 "运行实例" 按钮查看在线实例

JavaScript 可以验证数字输入

JavaScript 通常用于验证数字输入：

请输入 1 到 10 之间的数字：

运行实例 »

点击 "运行实例" 按钮查看在线实例

自动 HTML 表单验证

HTML 表单验证可以由浏览器自动执行：

如果表单字段 (fname) 为空，则 required 属性会阻止提交此表单：

HTML 表单实例

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

运行实例 »

点击 "运行实例" 按钮查看在线实例

提示：自动 HTML 表单验证在 Internet Explorer 9 或更早版本中不起作用。

数据验证

数据验证是确保用户输入干净、正确和有用的过程。

典型的验证任务是：

用户是否填写了所有必填字段？
用户是否输入了有效日期？
用户是否在数字字段中输入了文本？

大多数情况下，数据验证的目的是确保用户输入正确。

验证可以通过许多不同的方法定义，并以许多不同的方式部署。

服务器端验证由 Web 服务器在输入发送到服务器后执行。

在将输入发送到 Web 服务器之前，客户端验证由 Web 浏览器执行。

HTML 约束验证

HTML5 引入了一种新的 HTML 验证概念，称为约束验证。

HTML 约束验证基于：

约束验证 HTML input 属性
约束验证 CSS 伪选择器
约束验证 DOM 属性和方法

约束验证 HTML input 属性

属性	描述
disabled	规定应禁用 input 元素。
max	规定 input 元素的最大值。
min	规定 input 元素的最小值。
pattern	规定 input 元素的值模式。
required	规定 input 字段必填。
type	规定 input 元素的类型。

如需完整列表，请访问 HTML Input 属性。

约束验证 CSS 伪选择器

选择器	描述
:disabled	选择规定了 "disabled" 属性的 input 元素。
:invalid	选择有无效值的 input 元素。
:optional	选择未规定 "required" 属性的 input 元素。
:required	选择规定了 "required" 属性的 input 元素。
:valid	选择具有有效值的 input 元素。