本文主要是介绍数据合法性校验，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
校验流程：
用户输入数据
数据和发行校验
校验结果处理
校验内容：
是否为空值
数据类型
数据取值范围
数据模式
校验意义：
得到正确的数据
保护用户
保护自己
校验分类：
分类一：
- 客户端校验
- 服务端校验
分类二：
- 字段级校验
- 字符级校验
- 集中校验
分类三：
- 自己校验
- 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>
效果展示：
如果输入的是字母，那么就会报错：
这篇关于数据合法性校验的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
