<form id="register-form"> <label for="user-id">用户ID:</label> <input type="text" id="user-id" name="user-id" required><br> <label for="user-password">用户密码:</label> <input type="password" id="user-password" name="user-password" required><br> <label>用户性别:</label> <input type="radio" id="male" name="gender" value="male" required> <label for="male">男</label> <input type="radio" id="female" name="gender" value="female" required> <label for="female">女</label><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>编写验证代码
时间: 2023-07-03 13:21:49 浏览: 80
好的,以下是一个 JavaScript 示例代码,可以对您提供的表单进行基本的验证。您可以将此代码添加到您的 HTML 文件中,或者将其保存为一个单独的 JavaScript 文件并在 HTML 文件中引入:
```
<script>
const form = document.getElementById('register-form');
const userId = document.getElementById('user-id');
const userPassword = document.getElementById('user-password');
const male = document.getElementById('male');
const female = document.getElementById('female');
const aiHao = document.querySelectorAll('.aiHao');
form.addEventListener('submit', function(event) {
event.preventDefault(); // 防止表单自动提交
// 验证用户ID是否填写
if (userId.value.trim() == '') {
alert('请填写用户ID!');
return;
}
// 验证用户密码是否填写
if (userPassword.value.trim() == '') {
alert('请填写用户密码!');
return;
}
// 验证用户性别是否选择
if (!male.checked && !female.checked) {
alert('请选择用户性别!');
return;
}
// 验证用户兴趣爱好是否选择
let checkedCount = 0;
for (let i = 0; i < aiHao.length; i++) {
if (aiHao[i].checked) {
checkedCount++;
}
}
if (checkedCount == 0) {
alert('请至少选择一项兴趣爱好!');
return;
}
// 如果通过验证,可以在这里提交表单或执行其他操作
alert('表单验证通过!');
form.submit();
});
</script>
```
此代码使用了 JavaScript 的事件监听器和条件语句,对表单进行了基本的验证。您可以根据需要进行修改和扩展,例如添加更多的验证规则、自定义错误提示信息等。
阅读全文