JS 表单验证
JS 表单验证
- HTML 表单验证可以通过 JS 来完成
以下实例代码用于判断表单字段（fname）值是否存在，如果不存在，就弹出信息，阻止表单提交：
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("需要输入名字。");
return false;
}
}
以上 JS 实例可以通过 HTML 代码来调用
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字：<input type="text" name="fname">
<input tytpe="submit" value="提交">
</form>
JS 数字验证
- JS 常用于对输入数字的验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>
JS 验证输入
</h1>
<p>
请输入 1 到 10 的数字：
</p>
<input id="numb">
<botton type="botton" onclick="myFunction()">提交</botton>
<p id="demo">
</p>
<script>
function myFunction() {
var x,text;
// 获取 id="numb"的值
x = document.getElementById("numb").value;
if (isNaN(x) || x < 1 || x > 10) {
text = "输入错误";
} else {
text = "输入正确";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
HTML 表单自动验证
- HTML 表单验证也可以通过浏览器来自动完成
- 如果表单字段（fname）的值为空，required 属性会来阻止表单提交
<form action="demo_form.php" method="post">
<input type="text" name="fname" required="required">
<input type="submit" value="提交">
</form>
数据验证
- 数据验证用于确保用户输入的数据是有效的
- 典型的数据验证有：
- 必需字段是否输入？
- 用户是否输入了合法的数据？
- 在数字字段是否输入了文本？
- 大多数情况下，数据验证用于确保用户正确输入数据
- 数据验证可以用不同方法来定义，并通过多种方式来调用
- 服务端数据验证是在数据提交到服务器上后在验证
- 客户端数据是在数据发送到服务器前，在浏览器上完成验证
E-mail 验证
- 输入的数据必须包含 @ 符号和点号(.)
- @ 不可以是邮件地址的首字符
- @ 之后需有至少一个点号
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
Email:<input type="text" name="email">
<input type="submit" value="提交">
</form>
<script>
function validateForm() {
var x = document.forms["myForm"]["email"].value;
var atpos = x.indexOf("@");
var dotpos = x.lastIndedxOf(".");
if (atpos < 1 || dotpos < atpos + 2 >= x.length) {
alert("不是一个有效的 e-mail 地址")
}
return false;
}
</script>
</body>
</html>
HTML 约束验证
- HTML5 新增了 HTML 表单的验证方式：约束验证（constraint validation）
- 约束验证是表单被提交时浏览器用来实现验证的一种算法
- HTML 约束验证基于
- HTML 输入属性
- CSS 伪类选择器
- DOM 属性和方法
- 约束验证 HTML 输入属性
| 属性 | 描述 |
|---|---|
| disabled | 固定输入的元素不可用 |
| max | 规定输入元素的最大值 |
| min | 规定输入元素的最小值 |
| pattern | 规定输入元素值的模式 |
| required | 规定输入元素字段是必须的 |
| type | 规定输入元素的类型 |
- 约束验证 CSS 伪类选择器
| 选择器 | 描述 |
|---|---|
| :disabled | 选取属性为"disabled"属性的 input 元素 |
| :invalid | 选取无效值的 input 元素 |
| :optional | 选取没有"required"属性的 input 元素 |
| :required | 选取有"required"属性的 input 元素 |
| :valid | 选取有效值的 input 元素 |
JS 验证 API
约束验证 DOM 的方法
-
checkValidity()
- 如果 input 元素中的数据是合法的，返回 true，否则返回 false
-
setCustomValidity()
- 设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法
- 使用 setCustomValidity() 设置自定义提示后，validity.customError 就会变成 true，则 checkValidity 总是返回 false
- 如果要重新判断需要取消自定义提示，方式如下：
setCustomValidity('') setCustomValidity(null) setCustomValidity(undefined) -
以下实例如果输入信息不合法，则返回错误信息
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">验证</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 属性
| 属性 | 描述 |
|---|---|
| validity | 布尔属性值，返回 input 输入值是否合法 |
| validationMassage | 浏览器错误提示信息 |
| willValidate | 指定 input 是否需要验证 |
validity 属性
- input 元素的 validity 属性包含一系列关于 validity 数据属性
| 属性 | 描述 |
|---|---|
| customError | 设置为 true，如果设置了自定义的 validity 信息 |
| patternMismatch | 设置为 true，如果元素值不匹配它的模式属性 |
| rangeOverflow | 设置为 true，如果元素值大于设置的最大值 |
| rangeUnderflow | 设置为 true，如果元素值小于设置的最小值 |
| stepMismatch | 设置为 true，如果元素值不是按照规定的 step 属性设置 |
| tooLong | 设置为 true，如果元素值超过了 maxLength 属性设置的长度 |
| typeMismatch | 设置为 true，如果元素值不是预期相匹配的类型 |
| valueMissing | 设置为 true，如果元素（required 属性）没有值 |
| valid | 设置为 true，如果元素值是合法的 |
- 实例：如果输入的值大于 100，显示一个信息
<input id="id1" type="number" max="100">
<button onclick="myFunction()">验证</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (doccument.getElementById("id1").validity.rangeOverflow) {
txt = "输入的值太大了。";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
- 实例：如果输入的值小于 100，显示一个信息
<input id="id1" type="number" min="100" required>
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
var inpObj = document.getElementById("id1");
if(!isNumeric(inpObj.value)) {
txt = "你输入的不是数字";
} else if (inpObj.validity.rangeUnderflow) {
txt = "输入的值太小了";
} else {
txt = "输入正确";
}
document.getElementById("demo").innerHTML = txt;
}
// 判断输入是否为数字
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>