校验流程:
用户输入数据
数据和发行校验
校验结果处理
校验内容:
是否为空值
数据类型
数据取值范围
数据模式
校验意义:
得到正确的数据
保护用户
保护自己
校验分类:
分类一:
- 客户端校验
- 服务端校验
分类二:
- 字段级校验
- 字符级校验
- 集中校验
分类三:
- 自己校验
- H5校验
- 混合校验
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>数据合法性校验</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
padding: 0;
}
table {
border: 1px solid #ccc;
padding: 20px;
border-radius: 10px;
}
td {
padding: 10px;
}
input[type="text"] {
width: 100px;
}
button {
padding: 8px 16px;
}
</style>
</head>
<body>
<table>
<tr>
<td>长度:<input type="text" id="length" /></td>
</tr>
<tr>
<td>宽度:<input type="text" id="width" /></td>
</tr>
<tr>
<td><button>计算</button></td>
</tr>
<tr>
<td>周长:<input type="text" id="area" /></td>
</tr>
<tr>
<td>面积:<input type="text" id="perimeter" /></td>
</tr>
</table>
</body>
<script>
let $ = document.querySelector.bind(document);
let lengthInput = $("#length");
console.log(lengthInput);
// 按键盘时触发事件
lengthInput.onkeydown = function (e) {
let key = e.key;
key = parseInt(key);
if (isNaN(key)) {
// 阻止事件的默认操作
e.preventDefault();
}
};
</script>
</html>
效果展示:
如果输入的是字母,那么就会报错: