码农教程 - 一技在手,衣食无忧! tools

目录

JavaScript 表单

❮ 上一节 下一节 ❯

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.html" 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.html" 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输入属性
  • 约束验证CSS伪选择器
  • 约束验证域属性和方法

约束验证HTML输入属性

Attribute Description
disabled Specifies that the input element should be disabled
max Specifies the maximum value of an input element
min Specifies the minimum value of an input element
pattern Specifies the value pattern of an input element
required Specifies that the input field requires an element
type  Specifies the type of an input element

有关完整列表，请转到HTML 输入属性。

约束验证CSS伪选择器

Selector Description
:disabled Selects input elements with the "disabled" attribute specified
:invalid Selects input elements with invalid values
:optional Selects input elements with no "required" attribute specified
:required Selects input elements with the "required" attribute specified
:valid Selects input elements with valid values

有关完整列表，请转到CSS 伪类。


❮ 上一节 下一节 ❯