JS 表单验证
HTML 表单验证能够通过JS来完成
如果某个表单字段(fname)是空的,那么该函数会发出一条警告消息,并返回 false,以防止表单被提交出去:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == ""){
alert("必须填写姓名!");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="" onsubmit="return validateForm()" method="post">
姓名:<input type="text" nmae="fname">
<input type="submit" value="提交">
</form>
</body>
</html>
自动 HTML 表单验证
HTML 表单验证能够被浏览器自动执行:
如果表单字段(fname)是空的,required 属性防止表单被提交:
<!DOCTYPE html>
<html>
<body>
<form action="/demo/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="提交">
</form>
<p>如果单击“提交”,而不填写文本字段,您的浏览器将显示错误消息。</p>
</body>
</html>
自动 HTML 表单验证不适用于 Internet Explorer 9 或更早的版本。