注册表单案例
制作一个包含基本用户交互和数据验证的用户注册表单示例。
表单元素:
- 用户名:一个文本输入框,用于输入用户名。
- 密码:一个密码输入框,用于输入密码。
- 性别:两个单选按钮,分别代表男性和女性。
- 爱好:三个复选框,分别代表唱歌、跳舞和说唱(rap)。
- 国籍:一个下拉选择框,包含三个选项:中国、美国和英国。
- 备注:一个多行文本输入区域,用户可以输入额外的信息。
JavaScript功能:
- 实时验证:当用户名或密码发生变化时,会检查其长度是否符合要求(用户名至少3个字符,密码至少6个字符),并在旁边显示相应的错误提示。
- 表单提交验证:在提交表单前进行简单验证,确保用户名和密码不为空。如果未通过验证,则阻止表单提交并弹出警告。
- 显示信息:成功验证后,将用户填写的所有信息以格式化的方式显示在一个指定的
<div>
中。 - 设置默认值:点击“表单赋值”按钮后,会自动填充表单中的某些字段为预设值。
- 清空显示信息:点击“重置表单”按钮不仅会清除表单数据,还会清空显示信息区域的内容。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>注册表单</title>
<style>
span {color: red;font-size: 12px;}
#displayInfo {width: 360px;height: 170px;border: 1px solid #000;}
</style>
</head>
<body>
<h2>注册表单</h2>
<form name="regForm" onsubmit="validateAndDisplay(event)">
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<span></span>
<br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password">
<span></span>
<br><br>
<label>性别:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label><br><br>
<label>爱好:</label>
<input type="checkbox" id="singing" name="singing" value="sing">
<label for="singing">唱</label>
<input type="checkbox" id="dancing" name="dancing" value="dance">
<label for="dancing">跳</label>
<input type="checkbox" id="rapping" name="rapping" value="rap">
<label for="rapping">rap</label><br><br>
<label for="nationality">国籍:</label>
<select id="nationality" name="nationality">
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="英国">英国</option>
</select><br><br>
<label for="remarks">备注:</label><br>
<textarea id="remarks" name="remarks" rows="4" cols="50"></textarea><br><br>
<button type="submit">立即注册</button>
<button type="button" onclick="setDefaultValues()">表单赋值</button>
<button type="reset" onclick="clearDisplayInfo()">重置表单</button>
</form><br><br>
<div id="displayInfo"></div>
</body>
<script>
// 获取用户名和密码元素
var username = document.forms["regForm"]["username"];
var password = document.forms["regForm"]["password"];
// 实时验证用户名
username.onchange = function () {
var errorSpan = this.nextElementSibling; // 获取下一个兄弟元素节点
if (this.value.length < 3) {
errorSpan.textContent = "用户名至少需要3个字符";
} else {
errorSpan.textContent = "";
}
}
// 实时验证密码
password.onchange = function () {
var errorSpan = this.nextElementSibling;
if (this.value.length < 6) {
errorSpan.textContent = "密码至少需要6个字符";
} else {
errorSpan.textContent = "";
}
}
// 简单的客户端验证,并阻止表单的默认提交行为
function validateAndDisplay(event) {
if (username.value === "" || password.value === "") {
alert("用户名和密码必须填写");
event.preventDefault(); // 阻止表单提交
return;
}
// 调用显示信息方法
displayInfo();
event.preventDefault(); // 阻止表单提交
}
// 在页面上显示信息
function displayInfo() {
// 获取页面上名称为"regForm"的表单
var form = document.forms["regForm"];
// 显示信息区域
var div = document.getElementById("displayInfo");
// 将选中的内容拼接返回页面
div.innerHTML = "<strong>用户名:</strong>" + form.username.value + "<br/>" +
"<strong>密码:</strong>" + form.password.value + "<br/>" +
"<strong>性别:</strong>" + (form.gender[0].checked ? "男" : "女") + "<br/>" +
"<strong>爱好:</strong>" + getHobbies(form) + "<br/>" +
"<strong>国籍:</strong>" + form.nationality.value + "<br/>" +
"<strong>备注:</strong><br/>" + form.remarks.value;
}
// 将选中的爱好拼接起来 若未选择默认无
function getHobbies(form) {
var hobbies = [];
if (form.singing.checked) { hobbies.push('唱'); }
if (form.dancing.checked) { hobbies.push('跳'); }
if (form.rapping.checked) { hobbies.push('rap'); }
return hobbies.join(", ") || "无";
}
// 设置默认值
function setDefaultValues() {
document.forms["regForm"]["username"].value = "默认用户名";
document.forms["regForm"]["password"].value = "123";
document.forms["regForm"]["gender"][0].checked = true; // 默认选中男
document.forms["regForm"]["singing"].checked = true; // 默认选中唱歌
document.forms["regForm"]["nationality"].value = "中国";
document.forms["regForm"]["remarks"].value = "这是默认的备注内容。";
}
// 清空显示信息区域
function clearDisplayInfo() {
var div = document.getElementById("displayInfo");
div.innerHTML = ""; // 清空显示信息区域
}
</script>
</html>
返回顶部案例
基本功能:当页面滚动时,更新 <h1>
标签的内容为当前的 scrollTop
值,并且点击“返回顶部”链接时平滑地将页面滚动到顶部。
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style>
body {height: 2000px;user-select: none;}
h1 {position: fixed;top: 0;}
h2 {position: fixed;bottom: 20px;right: 20px;}
h2:hover {text-decoration: underline;}
</style>
</head>
<body onscroll="setScroll()">
<h1 id="scrollTop">0</h1>
<h2 id="goBack" onclick="goTop()">返回顶部</h2>
</body>
<script>
function setScroll() {
document.getElementById("scrollTop").innerHTML =
document.documentElement.scrollTop;
}
function goTop(){
document.documentElement.scrollTop = 0;
}
</script>
显示当前滚动位置:
- 页面顶部
<h1>
标签实时显示当前页面的垂直滚动位置(scrollTop
)。
返回顶部按钮:
- 点击页面底部右下角固定图标可以平滑滚动到页面顶部。
图标显示与隐藏:
- 当页面滚动超过 500 像素时,图标会显示。
- 当页面滚动到顶部(即
scrollTop
小于或等于 500 像素)时,图标会隐藏。
图标动画效果:
- 点击图标时,图标会向上平滑移动出视口,并在滚动完成后隐藏。
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style>
body { height: 2000px; user-select: none; }
h1 { position: fixed; top: 0; }
img {position: fixed;bottom: 20px;right: 20px;cursor: pointer;width: 40px;transition: transform 0.5s ease-out; }/* 添加过渡效果 */
img:hover { text-decoration: underline; }
.hidden { opacity: 0; pointer-events: none; } /* 隐藏图标 元素将不会响应任何鼠标事件 */
.move-up { transform: translateY(-100vh); } /* 平滑移动到顶部的类 */
</style>
</head>
<body>
<h1 id="scrollTop">0</h1>
<img src="./img/top.png" id="goBack" onclick="goTop()"/>
<script>
function setScroll() {
// 获取 scrollTop 的值 并赋给 h1
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
document.getElementById("scrollTop").innerHTML = scrollTop;
// 控制图标显示与隐藏
var goBackImg = document.getElementById("goBack");
if (scrollTop > 500) {
goBackImg.classList.remove('hidden');
} else {
goBackImg.classList.add('hidden');
}
}
function goTop() {
// 平滑滚动到顶部
window.scrollTo({ top: 0, behavior: 'smooth' });
// 添加 move-up 类以平滑移动图标
var goBackImg = document.getElementById("goBack");
goBackImg.classList.add('move-up');
// 移除 move-up 类以便下次点击时可以再次触发动画
setTimeout(() => {
goBackImg.classList.remove('move-up');
goBackImg.classList.add('hidden'); // 滚动到顶部后隐藏图标
}, 500); // 与 transition 持续时间一致
}
// 添加滚动事件监听器
window.addEventListener('scroll', setScroll);
// 页面加载时初始化 scrollTop 显示
setScroll();
</script>
</body>