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.php" onsubmit="return validateForm()" 
method="post">
 Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}
</script>
</head>
<body>

<h2>JavaScript Validation</h2>

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

</body>
</html>

JavaScript 可以验证数字输入

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

请输入1到10之间的数字

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<p>Please input a number between 1 and 10:</p>

<input id="numb">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

<script>
function myFunction() {
  // Get the value of the input field with id="numb"
  let x = document.getElementById("numb").value;
  // If x is Not a Number or less than one or greater than 10
  let text;
  if (isNaN(x) || x < 1 || x > 10) {
    text = "Input not valid";
  } else {
    text = "Input OK";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html> 


自动 HTML 表单验证

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

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

HTML 表单示例

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

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

<p>If you click submit, without filling out the text field,
your browser will display an error message.</p>

</body>
</html>

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


数据验证

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

典型的验证任务是:

  • 用户是否填写了所有必填字段?

  • 用户是否输入了有效日期?

  • 用户是否在数字字段中输入了文本?

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

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

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

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


HTML 约束验证

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

HTML 约束验证基于:

  • 约束验证 HTML 输入属性

  • 约束验证CSS伪选择器

  • 约束验证DOM属性和方法


约束验证 HTML 输入属性

disabled

指定应禁用输入元素

max

指定输入元素的最大值

min

指定输入元素的最小值

pattern

指定输入元素的值模式

required

指定输入字段需要一个元素

type 

指定输入元素的类型

如需完整列表,请转至 HTML 输入属性。


约束验证 CSS 伪选择器

:disabled

选择指定了“disabled”属性的输入元素

:invalid

选择具有无效值的输入元素

:optional

选择未指定“required”属性的输入元素

:required

选择指定了“required”属性的输入元素

:valid

选择具有有效值的输入元素

如需完整列表,请访问 CSS 伪类。