编写注册页面 有用户名输入框和密码属性框,兴趣爱好复选框,生日输入框 注册按钮和重置按钮 全部不能为空;用户名不能出现字母,不能以数字开头;密码必须时6位,兴趣爱好必须至少选择一个,生日输入框不得晚于今天的时间;否则将错误信息展示在输入框的下方;如果全部正确那么form跳转到百度页面
时间: 2024-02-18 16:03:44 浏览: 76
好的,我可以给您提供一个简单的注册页面的 HTML 和 JavaScript 代码示例,如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<title>注册页面</title>
<script type="text/javascript">
function validateForm() {
var username = document.forms["myForm"]["username"].value;
var password = document.forms["myForm"]["password"].value;
var interests = document.forms["myForm"]["interests[]"];
var birthday = document.forms["myForm"]["birthday"].value;
// 判断用户名是否为空、是否包含字母、是否以数字开头
if (username == null || username == "" || /\D/.test(username) || /^\d/.test(username)) {
document.getElementById("username-error").innerHTML = "用户名不能为空,不能包含字母,不能以数字开头";
return false;
}
// 判断密码是否为空、是否为6位
if (password == null || password == "" || password.length != 6) {
document.getElementById("password-error").innerHTML = "密码不能为空,必须为6位";
return false;
}
// 判断兴趣爱好是否至少选择一个
var interestsChecked = false;
for (var i = 0; i < interests.length; i++) {
if (interests[i].checked) {
interestsChecked = true;
break;
}
}
if (!interestsChecked) {
document.getElementById("interests-error").innerHTML = "兴趣爱好必须至少选择一个";
return false;
}
// 判断生日是否为空、是否晚于今天
var today = new Date();
if (birthday == null || birthday == "" || new Date(birthday) > today) {
document.getElementById("birthday-error").innerHTML = "生日不能为空,不得晚于今天的时间";
return false;
}
return true;
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return validateForm()" action="https://www.baidu.com">
<label>用户名:</label>
<input type="text" name="username"><br>
<span id="username-error"></span><br>
<label>密码:</label>
<input type="password" name="password"><br>
<span id="password-error"></span><br>
<label>兴趣爱好:</label><br>
<input type="checkbox" name="interests[]" value="篮球">篮球
<input type="checkbox" name="interests[]" value="足球">足球
<input type="checkbox" name="interests[]" value="乒乓球">乒乓球<br>
<span id="interests-error"></span><br>
<label>生日:</label>
<input type="date" name="birthday"><br>
<span id="birthday-error"></span><br>
<input type="submit" value="注册">
<input type="reset" value="重置">
</form>
</body>
</html>
```
在上述代码中,`validateForm()` 函数用于在用户点击注册按钮时对表单进行验证。首先通过 `document.forms` 对象获取表单中的各个输入框及复选框的值,然后逐个进行验证。如果验证未通过,就在对应的错误信息 `<span>` 标签中显示相应的错误信息,并返回 `false`,阻止表单提交;如果所有验证都通过,则返回 `true`,允许表单提交,并跳转到百度页面。
注意,上述代码只是一个简单的示例,实际情况下可能需要更加严格的验证规则,以及更加美观和易用的界面。您可以根据实际需求进行相应的修改和优化。
阅读全文