JavaScript formulær

JavaScript表单验证

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

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

JavaScript-eksempel

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-begrænsningsvalidering er baseret på:

  • Begrænsningsvalidering HTML input-egenskaber
  • Begrænsningsvalidering CSS pseudo-selektorer
  • Begrænsningsvalidering DOM egenskaber og metoder

Begrænsningsvalidering HTML input-egenskaber

Egenskab Beskrivelse
disabled Definer, at input-elementet skal være deaktiveret.
max Definer input-elementets maksimale værdi.
min Definer input-elementets mindste værdi.
pattern Definer input-elementets værdimønster.
required Definer input-feltet som obligatorisk.
type Definer input-elementets type.

For en fuld liste, besøg HTML Input-attributter.

Begrænsningsvalidering CSS pseudo-selektorer

Vælger Beskrivelse
:disabled Vælg input-elementer, der har defineret "disabled"-egenskaben.
:ugyldig Vælg input-elementer med ugyldige værdier.
:valgfri Vælg input-elementer, der ikke har defineret "required"-egenskaben.
:required Vælg input-elementer, der har defineret "required"-egenskaben.
:valid Vælg input-elementer med gyldige værdier.

For en fuld liste, besøg CSS pseudo-klasser.