校验流程：
用户输入数据
数据和发行校验
校验结果处理
校验内容：
是否为空值
数据类型
数据取值范围
数据模式
校验意义：
得到正确的数据
保护用户
保护自己
校验分类：
分类一：
- 客户端校验
- 服务端校验
分类二：
- 字段级校验
- 字符级校验
- 集中校验
分类三：
- 自己校验
- 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>
效果展示：
如果输入的是字母，那么就会报错：
1243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
