表单验证
HTML 表单验证可以通过 JavaScript 来完成。
表单验证实例1
以下实例代码用于判断表单字段(fname)值是否存在， 如果输入为空，会提示输入为空
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="message"></p>
<form name="myForm" action=""
onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
<script>
message = document.getElementById("message")
function validateForm() {
var input = document.forms["myForm"]["fname"].value;
if (!input) {
message.innerHTML = "需要输入名字。";
return false;
}
message.innerHTML = "您输入的是:" + input
return false
}
</script>
</body>
</html>表单验证实例2
JavaScript 验证输入的数字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>JavaScript 验证输入</h1>
<p>请输入 1 到 255之间的数字：</p>
<input id="color">
<button type="button" onclick="myFunction()">提交</button>
<p id="message"></p>
<script>
function myFunction() {
var color, messge;
// 获取 id="color" 的值
color = document.getElementById("color").value;
// color值必须介于0～255
if (isNaN(color) || color < 1 || color > 255) {
message = "输入错误";
} else {
message = "输入正确";
}
document.getElementById("message").innerHTML = message;
}
</script>
</body>
</html>表单验证实例3
使用javascript验证用户的邮件格式是否正确
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<head>
<script>
function validateForm(){
var email=document.forms["myForm"]["email"].value;
var email_patt = /\w+@\w+\.com/
if (!email_patt.test(email)){
alert("不是一个有效的 e-mail 地址");
return false;
}
alert("邮件正确")
return false
}
</script>
</head>
<body>
<form name="myForm" action="" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
</body>
</html>表单自动验证
HTML 表单验证也可以通过浏览器来自动完成。
如果表单字段 (fname) 的值为空, required 属性会阻止表单提交：
表单自动验证实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="" method="post">
<input type="text" name="fname" required="required">
<input type="submit" value="提交">
</form>
<p>点击提交按钮，如果输入框是空的，浏览器会提示错误信息。</p>
</body>
</html>Internet Explorer 9 及更早 IE 浏览器不支持表单自动验证。
数据验证
数据验证用于确保用户输入的数据是有效的。
在客户端典型的数据验证有：
- 必需字段是否有输入?
- 用户是否输入了合法的数据?
- 在数字字段是否输入了文本?
大多数情况下，数据验证用于确保用户正确输入数据，客户端验证通常用于提高用户的体验度，预防用户因为一些原因输入了错误的数据。，由于客户端传递的数据通常由客户完全控制，所以要保证数据的安全性，需要在服务器端重新进行验证
HTML 约束验证
HTML5 新增了 HTML 表单的验证方式：约束验证（constraint validation）。
约束验证是表单被提交时浏览器用来实现验证的一种算法。
HTML 约束验证基于：
- HTML 输入属性
- CSS 伪类选择器
- DOM 属性和方法
约束验证 HTML 输入属性
| 属性 | 描述 |
|---|---|
| disabled | 规定输入的元素不可用 |
| max | 规定输入元素的最大值 |
| min | 规定输入元素的最小值 |
| pattern | 规定输入元素值的模式 |
| required | 规定输入元素字段是必需的 |
| type | 规定输入元素的类型 |
完整列表，请查看 HTML 输入属性。
约束验证 CSS 伪类选择器
| 选择器 | 描述 |
|---|---|
| :disabled | 选取属性为 "disabled" 属性的 input 元素 |
| :invalid | 选取无效的 input 元素 |
| :optional | 选择没有"optional"属性的 input 元素 |
| :required | 选择有"required"属性的 input 元素 |
| :valid | 选取有效值的 input 元素 |
完整列表，请查看 CSS 伪类。
讨论区