jquery----用户密码验证

时间:2025-04-20 15:34:49
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业1</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<style>
.container {
margin-top: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form action="#" novalidate>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" placeholder="username">
<span id="helpBlock" class="help-block"></span>
</div>
<div class="form-group">
<label for="Password">密码</label>
<input type="password" class="form-control" id="Password" placeholder="Password">
<span id="helpBlock2" class="help-block"></span>
</div>
<button type="submit" class="btn btn-default submit">提交</button>
</form>
</div>
</div>
</div>
<script src="jquery.min.js"></script>
<script src="bootstrap.js"></script>
<script>
$(".submit").on("click",function () {
$("form .form-group").removeClass("has-error");
$("form span").text("");
$(":input").each(function () {
if ($(this).val().length===0){
console.log($(this).next().html())
console.log($(this).prev()[0].innerHTML)
var name = $(this).prev().text();
$(this).parent().addClass("has-error");
$(this).next().text(name+"不能为空");
return false
}
});
return false
}) </script>
</body>
</html>