库存管理系统是企业日常运营中常用的工具，核心功能包括库存信息录入、数据合法性校验、库存数量变动计算、库存总价值统计等，这些功能可以通过HTML搭建页面结构，结合JavaScript实现表单验证和数学函数计算来完成。
一、库存管理系统的HTML表单结构
首先需要搭建用于录入库存信息的表单，包含商品名称、商品单价、库存数量、入库数量等字段，每个字段都需要设置对应的标识，方便后续JavaScript获取值进行校验和计算。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>库存管理系统</title>
</head>
<body>
<h3>库存信息录入</h3>
<form id="stockForm">
<p>
<label for="goodsName">商品名称：</label>
<input type="text" id="goodsName" name="goodsName" placeholder="请输入商品名称">
<span id="nameError" style="color:red;"></span>
</p>
<p>
<label for="unitPrice">商品单价（元）：</label>
<input type="text" id="unitPrice" name="unitPrice" placeholder="请输入商品单价">
<span id="priceError" style="color:red;"></span>
</p>
<p>
<label for="stockNum">当前库存数量：</label>
<input type="text" id="stockNum" name="stockNum" placeholder="请输入当前库存数量">
<span id="stockError" style="color:red;"></span>
</p>
<p>
<label for="inNum">本次入库数量：</label>
<input type="text" id="inNum" name="inNum" placeholder="请输入入库数量">
<span id="inError" style="color:red;"></span>
</p>
<p>
<button type="button" onclick="validateForm()">提交入库</button>
</p>
</form>
<div id="result"></div>
</body>
</html>
二、JavaScript表单验证实现
表单验证需要确保所有输入字段的内容符合规则，比如商品名称不能为空，单价和数量必须是大于0的数字，避免后续计算出现错误。
// 表单验证函数
function validateForm() {
// 先清空之前的错误提示
document.getElementById("nameError").innerText = "";
document.getElementById("priceError").innerText = "";
document.getElementById("stockError").innerText = "";
document.getElementById("inError").innerText = "";
document.getElementById("result").innerText = "";
// 获取表单输入值
const goodsName = document.getElementById("goodsName").value.trim();
const unitPrice = document.getElementById("unitPrice").value.trim();
const stockNum = document.getElementById("stockNum").value.trim();
const inNum = document.getElementById("inNum").value.trim();
let isValid = true;
// 商品名称校验：不能为空
if (goodsName === "") {
document.getElementById("nameError").innerText = "商品名称不能为空";
isValid = false;
}
// 商品单价校验：必须是大于0的数字
const priceReg = /^d+(.d+)?$/;
if (unitPrice === "" || !priceReg.test(unitPrice) || parseFloat(unitPrice) <= 0) {
document.getElementById("priceError").innerText = "请输入大于0的有效单价";
isValid = false;
}
// 当前库存数量校验：必须是非负整数
const numReg = /^d+$/;
if (stockNum === "" || !numReg.test(stockNum)) {
document.getElementById("stockError").innerText = "请输入非负整数的库存数量";
isValid = false;
}
// 入库数量校验：必须是大于0的整数
if (inNum === "" || !numReg.test(inNum) || parseInt(inNum) <= 0) {
document.getElementById("inError").innerText = "请输入大于0的整数入库数量";
isValid = false;
}
// 验证通过则执行计算逻辑
if (isValid) {
calculateStock(goodsName, parseFloat(unitPrice), parseInt(stockNum), parseInt(inNum));
}
}
三、数学函数在库存计算中的应用
验证通过后，需要使用JavaScript内置的数学函数和相关计算逻辑，完成库存数量更新、库存总价值计算等操作。
// 库存计算函数
function calculateStock(goodsName, unitPrice, stockNum, inNum) {
// 计算入库后的总库存数量，使用加法函数
const totalStock = stockNum + inNum;
// 计算库存总价值，单价乘以总库存，使用乘法
const totalValue = unitPrice * totalStock;
// 保留两位小数的处理，使用toFixed方法，本质是数学舍入逻辑
const formatValue = totalValue.toFixed(2);
// 输出计算结果
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = `
<h4>入库操作结果</h4>
<p>商品名称：${goodsName}</p>
<p>商品单价：${unitPrice}元</p>
<p>原库存数量：${stockNum}</p>
<p>本次入库数量：${inNum}</p>
<p>入库后总库存数量：${totalStock}</p>
<p>当前库存总价值：${formatValue}元</p>
`;
}
四、功能测试与注意事项
完成代码编写后，可以在浏览器中打开HTML文件进行测试，输入不同的内容验证校验逻辑是否生效，比如输入非数字的单价会触发错误提示，输入符合规则的内容会正确输出计算结果。
需要注意的点：
- 表单获取的值默认是字符串类型，进行计算前需要转换为数字类型，避免字符串拼接错误
- 正则校验可以根据实际需求调整，比如允许单价输入更多位小数
- 实际项目中可以把数据存储到本地存储或者后端接口，实现持久化存储
以上代码是完整的可运行示例，直接复制到HTML文件中即可测试，所有HTML特殊字符都已经做了转义处理，不会出现语法错误。
HTMLJavaScript表单验证数学函数库存管理系统修改时间：2026-06-29 06:27:32