验证多个class相同的input框不为空
2020-05-25 本文已影响0人
祈澈菇凉
要求，页面有多个class相同的input输入框，在提交数据的时候，进行验证，验证input框不能为空，如果哪个为空，则弹出提示：
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>验证多个class相同的input框不为空</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
司乘卡号: <input class="personDeviceId" type="text" /><br />
司乘卡号: <input class="personDeviceId" type="text" /><br />
司乘卡号: <input class="personDeviceId" type="text" /><br />
<button type="button" class="btn blue" id="addBtn">保存</button>
</body>
<script type="text/javascript">
$("#addBtn").on("click", function() {
//验证车乘
var personDeviceId = ($(".personDeviceId").length);
for (var i = 0; i < personDeviceId; i++) {
if ($(".personDeviceId").eq(i).val().length == 0) {
alert("第" + (i + 1) + "个司乘卡号为空");
return;
};
};
})
</script>
</html>
效果如下图所示
