<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单验证</title> <script src="jquery-1.11.0.min.js"></script> <script> // 获取信息 var username; var password; var aiHao; function formCherk(){ username = $("#username").value; password = $("#password").value; aiHao = $(".aiHao").value; console.log(username + " " + password); // 校验 // 不符合 if (username == null || username == ""){ alert("姓名不能为空"); return false; } if(password == null || password == ""){ alert("密码不能为空"); return false; } var cherked = false; $(".aiHao").each(function(){ if($(this).prop("cherked")){ cherked = true; return false; } }); if(!cherked){ alert("请选择兴趣爱好"); return false; } return true; } </script> </head> <body> <form id = "myForm"> <label for="name">姓名:</label> <input type="text" id="username" name="username"></input><br> <label for="name">密码:</label> <input type="password" id="password" name="password"></input><br> <label for="name">兴趣爱好:</label> <input type="checkbox" class="aiHao" name="aiHao" value="跑步">跑步</input> <input type="checkbox" class="aiHao" name="aiHao" value="打球">打球</input> <input type="checkbox" class="aiHao" name="aiHao" value="跳舞">跳舞</input><br> <input type="submit" value="注册"></input> <input type="submit" value="登录"></input> </form> </body> </html>哪有问题
时间: 2023-07-03 13:20:11 浏览: 104
该代码存在以下问题:
1. `$` 符号未被正确引用,需要先引入 jQuery 库。
2. 获取元素属性值的方式不正确,应该使用 `.val()` 方法。
3. 判断复选框是否被选中的代码有误,应该使用 `.prop("checked")` 方法。
修改后的代码如下:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单验证</title>
<script src="jquery-1.11.0.min.js"></script>
<script>
// 获取信息
var username;
var password;
var aiHao;
function formCherk() {
username = $("#username").val();
password = $("#password").val();
aiHao = $(".aiHao:checked").val();
console.log(username + " " + password);
// 校验
// 不符合
if (username == null || username == "") {
alert("姓名不能为空");
return false;
}
if (password == null || password == "") {
alert("密码不能为空");
return false;
}
var cherked = false;
$(".aiHao").each(function () {
if ($(this).prop("checked")) {
cherked = true;
return false;
}
});
if (!cherked) {
alert("请选择兴趣爱好");
return false;
}
return true;
}
</script>
</head>
<body>
<form id="myForm">
<label for="name">姓名:</label>
<input type="text" id="username" name="username"><br>
<label for="name">密码:</label>
<input type="password" id="password" name="password"><br>
<label for="name">兴趣爱好:</label>
<input type="checkbox" class="aiHao" name="aiHao" value="跑步">跑步</input>
<input type="checkbox" class="aiHao" name="aiHao" value="打球">打球</input>
<input type="checkbox" class="aiHao" name="aiHao" value="跳舞">跳舞</input><br>
<input type="submit" value="注册" onclick="return formCherk()">
<input type="submit" value="登录" onclick="return formCherk()">
</form>
</body>
</html>
```
修改后的代码中,增加了 jQuery 库的引入,修改了获取元素属性值的方式,修改了判断复选框是否被选中的代码,同时在提交按钮上绑定了验证函数 `formCherk()`。
阅读全文