HTML 表单验证可以通过 JavaScript 完成。
如果表单字段 (fname) 为空,此函数会发出警报消息,并返回 false,以防止提交表单:
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
提交表单时可以调用该函数:
<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 通常用于验证数字输入:
请输入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 表单验证可以由浏览器自动执行:
如果表单字段 (fname) 为空,则 required
属性会阻止此表单 提交:
<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 或更早版本中不起作用。
数据验证是确保用户输入干净的过程, 正确、有用。
典型的验证任务是:
用户是否填写了所有必填字段?
用户是否输入了有效日期?
用户是否在数字字段中输入了文本?
大多数情况下,数据验证的目的是确保用户输入正确。
验证可以通过许多不同的方法来定义,并部署在许多 不同的方式。
服务器端验证由网络服务器在输入发送到服务器后执行 服务器。
客户端验证由网络浏览器在输入发送到网络服务器之前执行。
HTML5 引入了一个新的 HTML 验证概念,称为约束 验证。
HTML 约束验证基于:
约束验证 HTML 输入属性
约束验证CSS伪选择器
约束验证DOM属性和方法
指定应禁用输入元素
指定输入元素的最大值
指定输入元素的最小值
指定输入元素的值模式
指定输入字段需要一个元素
指定输入元素的类型
如需完整列表,请转至 HTML 输入属性。
选择指定了“disabled”属性的输入元素
选择具有无效值的输入元素
选择未指定“required”属性的输入元素
选择指定了“required”属性的输入元素
选择具有有效值的输入元素
如需完整列表,请访问 CSS 伪类。