1.JavaScript验证表单
HTML表单验证能够通过JavaScript来完成。如果某个表单字段（fname）是空的，那么该函数会发出一条警告消息，并返回false，以防止表单被提交出去：
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("必须填写姓名");
return false;
}
}
该函数能够在表单提交时被调用：
<form name="myForm" action="/action_page_post.php" onsubmit="return validateForm()" method="post">
姓名：<input type="text" name="fname">
<input type="submit" value="Submit">
</form>
2.JavaScript验证数字输入
（1）JavaScript常用于验证数字输入：请输入1到10之间的数字：
<script>
function myFunction() {
var x, text;
x = document.getElementById("numb").value;
if (isNaN(x) || x < 1 || x > 10) {
text = "输入无效";
} else {
text = "输入有效";
}
document.getElementById("demo").innerHTML = text;
}
</script>
（2）自动HTML表单验证
HTML表单验证能够被浏览器自动执行，如果表单字段（fname）是空的，required属性防止表单被提交：
<form action="/action_page_post.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
自动HTML表单验证不适用 Internet Explorer 9或更早的版本。
3.数据验证
数据验证指的是确保干净、正确和有用的用户输入的过程。典型的验证任务是：用户是否已填写所有必需的字段？用户是否已输入有效的日期？用户是否在数字字段中输入了文本？大多数情况下，数据验证的作用是确保正确的用户输入。
验证可以通过很多不同的方法来定义，并且可以使用很多不同的方法来开发。
服务器端验证是由web服务器执行的，在输入被送往服务器之后。客户端验证是由web浏览器执行的，在输入被送往web服务器之前。
HTML5引入了一种新的HTML验证概念，名为约束验证（constraint validation）。HTML约束验证基于：约束验证HTML输入属性、约束验证CSS伪选择器、约束验证DOM属性和方法。
（1）约束验证HTML输入属性
| 属性 | 描述 |
|---|---|
| disabled | 规定 input 元素应该被禁用 |
| max | 规定 input 元素的最大值 |
| min | 规定 input 元素的最小值 |
| pattern | 规定 input 元素的值模式 |
| required | 规定输入字段需要某个元素 |
| type | 规定 input 元素的类型 |
（2）约束验证CSS伪选择器
| 选择器 | 描述 |
|---|---|
| :disabled | 选择设置了 "disabled" 属性的 input 元素。 |
| :invalid | 选择带有无效值的 input 元素。 |
| :optional | 选择未设置 "required" 属性的 input 元素。 |
| :required | 选择设置了 "required" 属性的 input 元素。 |
| :valid | 选择带有有效值的 input 元素。 |
（3）约束验证DOM属性和方法
①约束验证DOM方法
checkValidity() 返回true，如果input元素包含有效数据；setCustomValidity()，设置input元素的validationMessage属性。
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var inpObj = document.getElementById("id1");
if (inpObj.checkValidity() == false) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
}
}
</script>
②约束验证DOM属性
A.基本属性
| 属性 | 描述 |
|---|---|
| validity | 包含与 input 元素的合法性相关的布尔属性。 |
| validationMessage | 包含当 validity 为 false 时浏览器显示的消息。 |
| willValidate | 指示是否验证 input 元素。 |
B.合法属性
| 属性 | 描述 |
|---|---|
| customError | 设置为 true，如果设置自定义的合法性消息。 |
| patternMismatch | 设置为 true，如果元素值不匹配其 pattern 属性。 |
| rangeOverflow | 设置为 true，如果元素值大约其 max 属性。 |
| rangeUnderflow | 设置为 true，如果元素值小于其 min 属性。 |
| stepMismatch | 当字段拥有 step 属性，且输入的 value 值不符合设定的间隔值时，该属性值为 true。 |
| tooLong | 设置为 true，如果元素值超过了其 maxLength 属性。 |
| typeMismatch | 当字段的 type 是 email 或者 url 但输入的值不是正确的类型时，属性值为 true。 |
| valueMissing | 设置为 true，如果元素（包含 required）没有值。 |
| valid | 设置为 true，如果元素值是有效的。 |
C.案例
如果输入字段中的数字大于 100（input元素的max属性），则显示一条消息：rangeOverflow属性
<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeOverflow) {
txt = "值太大";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
如果输入字段中的数字小于 100（input元素的min属性），则显示一条消息：rangeUnderflow属性
<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeUnderflow) {
txt = "值太小";
}
document.getElementById("demo").innerHTML = txt;
}
</script>