表单功能概述
用于新用户注册与账号创建的表单，覆盖以下核心流程：
- 账号信息：用户名唯一校验、强密码设置与确认
- 联系方式：邮箱格式校验与验证码发送/输入、手机号 +86 校验
- 合规确认：同意服务条款（必选），订阅资讯（可选）
- 现代简约样式、响应式布局、无障碍可访问性优化，并提供基础前端校验与交互（用户名唯一性与邮箱验证码发送为接口占位示例，需接入后端）
HTML代码
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>新用户注册</title>
<!-- 将下方 CSS 粘贴到 form.css 并在此处引入；或直接在页面内联 -->
<link rel="stylesheet" href="form.css" />
</head>
<body>
<main class="container">
<form class="form-card" id="register-form" method="post" action="/register">
<h1 class="form-title">创建新账号</h1>
<p class="form-subtitle">完成邮箱/手机验证并同意条款后即可注册</p>
<!-- 账号信息 -->
<fieldset class="section">
<legend class="section-title">账号信息</legend>
<!-- 用户名 -->
<div class="field">
<label for="username">用户名</label>
<input
type="text"
id="username"
name="username"
inputmode="latin"
autocomplete="username"
required
minlength="3"
maxlength="16"
pattern="^[A-Za-z0-9]{3,16}$"
title="3-16位，仅限字母与数字"
aria-describedby="username-hint username-status"
/>
<div class="hint" id="username-hint">3-16位字母或数字；将自动检查是否已被占用。</div>
<div class="status" id="username-status" aria-live="polite"></div>
</div>
<!-- 密码 -->
<div class="field">
<label for="password">密码</label>
<input
type="password"
id="password"
name="password"
autocomplete="new-password"
required
minlength="8"
pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)[A-Za-z\\d#?!@$%^&*\\-]{8,}"
title="至少8位，需包含大写字母、小写字母和数字；可用符号 #?!@$%^&*-"
aria-describedby="password-hint"
/>
<div class="hint" id="password-hint">至少8位，含大写/小写/数字，支持常见符号。</div>
</div>
<!-- 确认密码 -->
<div class="field">
<label for="confirm-password">确认密码</label>
<input
type="password"
id="confirm-password"
name="confirm_password"
autocomplete="new-password"
required
aria-describedby="confirm-hint confirm-error"
/>
<div class="hint" id="confirm-hint">需与上方密码一致。</div>
<div class="error-text" id="confirm-error" aria-live="polite"></div>
</div>
</fieldset>
<!-- 联系方式 -->
<fieldset class="section">
<legend class="section-title">联系方式</legend>
<!-- 邮箱 + 发送验证码 -->
<div class="field">
<label for="email">邮箱</label>
<div class="cluster">
<input
type="email"
id="email"
name="email"
autocomplete="email"
required
inputmode="email"
aria-describedby="email-hint email-status"
placeholder="name@example.com"
/>
<button class="btn btn-secondary" type="button" id="send-email-code" aria-controls="email-code" disabled>
发送验证码
</button>
</div>
<div class="hint" id="email-hint">输入有效邮箱以接收6位验证码。</div>
<div class="status" id="email-status" aria-live="polite"></div>
</div>
<!-- 邮箱验证码 -->
<div class="field">
<label for="email-code">邮箱验证码</label>
<input
type="text"
id="email-code"
name="email_code"
inputmode="numeric"
autocomplete="one-time-code"
placeholder="6位数字"
required
minlength="6"
maxlength="6"
pattern="^\\d{6}$"
title="请输入6位数字验证码"
aria-describedby="email-code-hint"
/>
<div class="hint" id="email-code-hint">未收到？请检查垃圾邮件或稍后重试。</div>
</div>
<!-- 手机号（+86 校验） -->
<div class="field">
<label for="phone">手机号</label>
<input
type="tel"
id="phone"
name="phone"
inputmode="tel"
autocomplete="tel"
required
placeholder="+86 1XXXXXXXXXX"
pattern="^\\+86\\s?1[3-9]\\d{9}$"
title="必须以 +86 开头，后接 11 位中国大陆手机号"
aria-describedby="phone-hint phone-status"
/>
<div class="hint" id="phone-hint">格式示例：+86 13800001234</div>
<div class="status" id="phone-status" aria-live="polite"></div>
</div>
</fieldset>
<!-- 地区与条款 -->
<fieldset class="section">
<legend class="section-title">地区与条款</legend>
<!-- 国家/地区 -->
<div class="field">
<label for="country">国家/地区</label>
<select id="country" name="country" required aria-describedby="country-hint">
<option value="" disabled selected>请选择</option>
<option value="CN">中国</option>
<option value="US">美国</option>
<option value="OTHER">其他</option>
</select>
<div class="hint" id="country-hint">用于账号区域与合规设置。</div>
</div>
<!-- 同意服务条款（必选） -->
<div class="field checkbox-field">
<input type="checkbox" id="terms" name="terms" required />
<label for="terms">我已阅读并同意
<a href="/terms" target="_blank" rel="noopener noreferrer">服务条款</a>
</label>
</div>
<!-- 订阅资讯（可选） -->
<div class="field checkbox-field">
<input type="checkbox" id="subscribe" name="subscribe" />
<label for="subscribe">订阅产品更新与资讯（可选）</label>
</div>
</fieldset>
<!-- 提交 -->
<div class="actions">
<button class="btn" id="submit-btn" type="submit">创建账号</button>
</div>
<!-- 表单级消息输出 -->
<div class="form-message" id="form-message" aria-live="polite" role="status"></div>
</form>
</main>
<script>
// 可访问性辅助：工具函数
const qs = (sel, ctx = document) => ctx.querySelector(sel);
const setStatus = (el, message, type = "info") => {
if (!el) return;
el.textContent = message || "";
el.classList.remove("ok", "warn", "err");
if (type === "ok") el.classList.add("ok");
if (type === "warn") el.classList.add("warn");
if (type === "err") el.classList.add("err");
};
document.addEventListener("DOMContentLoaded", () => {
const form = qs("#register-form");
const username = qs("#username");
const usernameStatus = qs("#username-status");
const email = qs("#email");
const sendCodeBtn = qs("#send-email-code");
const emailStatus = qs("#email-status");
const emailCode = qs("#email-code");
const password = qs("#password");
const confirmPassword = qs("#confirm-password");
const confirmError = qs("#confirm-error");
const phone = qs("#phone");
const formMessage = qs("#form-message");
// 启用/禁用“发送验证码”按钮
const toggleSendBtn = () => {
sendCodeBtn.disabled = !email.validity.valid;
};
email.addEventListener("input", toggleSendBtn);
toggleSendBtn();
// 用户名唯一性检查（占位接口：请在使用说明中替换为真实接口）
let userCheckTimer = null;
username.addEventListener("input", () => {
setStatus(usernameStatus, "");
username.setCustomValidity("");
if (!username.validity.valid) return;
if (userCheckTimer) clearTimeout(userCheckTimer);
userCheckTimer = setTimeout(async () => {
try {
setStatus(usernameStatus, "正在检查可用性…", "warn");
const res = await fetch(`/api/check-username?u=${encodeURIComponent(username.value)}`, {
headers: { "Accept": "application/json" }
});
if (!res.ok) throw new Error("network");
const data = await res.json(); // 期望 { available: boolean }
if (data && data.available) {
setStatus(usernameStatus, "用户名可用", "ok");
username.setCustomValidity("");
} else {
setStatus(usernameStatus, "该用户名已被占用", "err");
username.setCustomValidity("用户名已被占用");
}
} catch (e) {
setStatus(usernameStatus, "暂时无法验证，请稍后重试", "warn");
// 不阻断提交，仅提示
username.setCustomValidity("");
}
}, 400);
});
// 发送邮箱验证码（占位接口）
let cooldown = 0;
let cooldownTimer = null;
const startCooldown = (sec = 60) => {
cooldown = sec;
sendCodeBtn.disabled = true;
sendCodeBtn.textContent = `已发送 (${cooldown}s)`;
cooldownTimer = setInterval(() => {
cooldown--;
if (cooldown <= 0) {
clearInterval(cooldownTimer);
sendCodeBtn.textContent = "重新发送";
toggleSendBtn();
} else {
sendCodeBtn.textContent = `已发送 (${cooldown}s)`;
}
}, 1000);
};
sendCodeBtn.addEventListener("click", async () => {
if (!email.validity.valid) return;
setStatus(emailStatus, "");
try {
sendCodeBtn.disabled = true;
sendCodeBtn.textContent = "发送中…";
const res = await fetch("/api/send-email-code", {
method: "POST",
headers: { "Content-Type": "application/json", "Accept": "application/json" },
body: JSON.stringify({ email: email.value })
});
if (!res.ok) throw new Error("network");
const data = await res.json(); // 期望 { ok: boolean }
if (data && data.ok) {
setStatus(emailStatus, "验证码已发送，请查收邮箱", "ok");
startCooldown(60);
emailCode.focus();
} else {
setStatus(emailStatus, "发送失败，请稍后重试", "err");
sendCodeBtn.textContent = "发送验证码";
toggleSendBtn();
}
} catch (e) {
setStatus(emailStatus, "网络异常，稍后再试", "err");
sendCodeBtn.textContent = "发送验证码";
toggleSendBtn();
}
});
// 确认密码一致性校验
const checkPasswords = () => {
if (confirmPassword.value && password.value !== confirmPassword.value) {
confirmPassword.setCustomValidity("两次输入的密码不一致");
confirmError.textContent = "两次输入的密码不一致";
} else {
confirmPassword.setCustomValidity("");
confirmError.textContent = "";
}
};
password.addEventListener("input", checkPasswords);
confirmPassword.addEventListener("input", checkPasswords);
// 手机号：如果用户只填了 11 位中国号，自动补齐 +86（不影响手动输入）
phone.addEventListener("blur", () => {
const raw = phone.value.trim();
if (/^1[3-9]\d{9}$/.test(raw)) {
phone.value = "+86 " + raw;
}
});
// 提交前汇总提示（浏览器本地校验基础上增强）
form.addEventListener("submit", (e) => {
setStatus(formMessage, "");
checkPasswords();
if (!form.checkValidity()) {
// 让浏览器显示原生校验气泡
return;
}
// 可根据需要在此增加更多前置校验或埋点
});
});
</script>
</body>
</html>
CSS样式
:root{
--bg: #ffffff;
--text: #0f172a;
--muted: #6b7280;
--primary: #2563eb;
--primary-600: #1d4ed8;
--border: #e5e7eb;
--ring: #93c5fd;
--error: #dc2626;
--ok: #16a34a;
--warn: #d97706;
--card: #ffffff;
--shadow: 0 6px 24px rgba(15, 23, 42, 0.08);
}
@media (prefers-color-scheme: dark){
:root{
--bg:#0b1020;
--text:#e5e7eb;
--muted:#9ca3af;
--primary:#60a5fa;
--primary-600:#3b82f6;
--border:#1f2937;
--ring:#2563eb66;
--error:#f87171;
--ok:#34d399;
--warn:#fbbf24;
--card:#0f172a;
--shadow: 0 8px 28px rgba(0,0,0,0.35);
}
}
* { box-sizing: border-box; }
html,body { height: 100%; }
body{
margin:0;
background:var(--bg);
color:var(--text);
font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
.container{
min-height:100%;
display:grid;
place-items:center;
padding: 32px 16px;
}
.form-card{
width:100%;
max-width: 560px;
background:var(--card);
border:1px solid var(--border);
border-radius:14px;
box-shadow: var(--shadow);
padding: 20px;
}
.form-title{
margin: 6px 0 4px;
font-size: 22px;
font-weight: 700;
}
.form-subtitle{
margin: 0 0 12px;
color: var(--muted);
font-size: 14px;
}
.section{
margin: 10px 0 6px;
padding: 10px 0 0;
border: 0;
}
.section-title{
font-size: 14px;
color: var(--muted);
margin-bottom: 8px;
}
.field{
display: grid;
gap: 6px;
margin-bottom: 14px;
}
.checkbox-field{
grid-template-columns: 20px 1fr;
align-items: start;
}
.checkbox-field > input{
margin-top: 2px;
}
label{
font-weight: 600;
}
input, select, button{
font: inherit;
}
input, select{
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 10px;
background: transparent;
color: var(--text);
outline: none;
transition: border-color .2s, box-shadow .2s, background-color .2s;
}
input::placeholder { color: color-mix(in oklab, var(--muted) 80%, transparent); }
input:focus-visible,
select:focus-visible{
border-color: var(--primary);
box-shadow: 0 0 0 4px var(--ring);
}
input:invalid[required]{
border-color: color-mix(in oklab, var(--error) 60%, var(--border));
}
.hint{
color: var(--muted);
font-size: 12px;
}
.error-text{
color: var(--error);
font-size: 13px;
}
.status{
font-size: 13px;
min-height: 1em;
}
.status.ok{ color: var(--ok); }
.status.warn{ color: var(--warn); }
.status.err{ color: var(--error); }
.cluster{
display: grid;
gap: 8px;
}
@media (min-width: 520px){
.cluster{
grid-template-columns: 1fr auto;
align-items: center;
}
}
.actions{
margin-top: 10px;
}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap: 8px;
padding: 10px 16px;
border-radius: 10px;
border: 1px solid transparent;
background: var(--primary);
color: white;
cursor: pointer;
font-weight: 600;
transition: transform .04s ease, background .2s, opacity .2s;
}
.btn:hover{ background: var(--primary-600); }
.btn:active{ transform: translateY(1px); }
.btn[disabled]{
opacity: .6;
cursor: not-allowed;
}
.btn.btn-secondary{
color: var(--primary-600);
background: transparent;
border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
}
.btn.btn-secondary:hover{
background: color-mix(in oklab, var(--primary) 10%, transparent);
}
.form-message{
margin-top: 10px;
min-height: 1em;
font-size: 14px;
color: var(--muted);
}
a{ color: var(--primary-600); text-decoration: none; }
a:hover{ text-decoration: underline; }
使用说明
- 文件组织
- 将“CSS样式”部分保存为 form.css，并确保 HTML 中已通过 引入
- 可将 HTML 直接作为注册页面。若需内联样式，可将 CSS 放入
🕒 版本历史
当前版本
优化输出结构，增强情节连贯性
- ✨ 新增章节节奏控制参数
- 🔧 优化人物关系描述逻辑
- 📝 改进主题深化引导语
- 🎯 增强情节转折点设计
重构提示词架构，提升生成质量
- 🚀 全新的提示词结构设计
- 📊 增加输出格式化选项
- 💡 优化角色塑造引导
COMING SOON
版本历史追踪，即将启航
记录每一次提示词的进化与升级，敬请期待。
💬 用户评价
双十一用这个提示词生成了20多张海报，效果非常好！点击率提升了35%，节省了大量设计时间。参数调整很灵活，能快速适配不同节日。
效果好
节省时间
作为设计师，这个提示词帮我快速生成创意方向，大大提升了工作效率。生成的海报氛围感很强，稍作调整就能直接使用。
创意好
专业
COMING SOON
用户评价与反馈系统，即将上线
倾听真实反馈，在这里留下您的使用心得，敬请期待。
