452 lines
16 KiB
TypeScript
452 lines
16 KiB
TypeScript
import { useState } from 'react'
|
|
import { Link } from 'wouter'
|
|
|
|
interface FormData {
|
|
username: string
|
|
email: string
|
|
password: string
|
|
confirmPassword: string
|
|
age: string
|
|
birthDate: string
|
|
phone: string
|
|
website: string
|
|
bio: string
|
|
country: string
|
|
newsletter: boolean
|
|
terms: boolean
|
|
}
|
|
|
|
type FormErrors = Record<string, string>;
|
|
|
|
export default function FormTestPage() {
|
|
const [formData, setFormData] = useState<FormData>({
|
|
username: '',
|
|
email: '',
|
|
password: '',
|
|
confirmPassword: '',
|
|
age: '',
|
|
birthDate: '',
|
|
phone: '',
|
|
website: '',
|
|
bio: '',
|
|
country: '',
|
|
newsletter: false,
|
|
terms: false
|
|
})
|
|
|
|
const [errors, setErrors] = useState<FormErrors>({})
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
const [submitResult, setSubmitResult] = useState<'success' | 'error' | null>(null)
|
|
const [submitMessage, setSubmitMessage] = useState('')
|
|
|
|
const validateField = (name: string, value: string | boolean): string => {
|
|
switch (name) {
|
|
case 'username':
|
|
if (!value) return '用户名不能为空'
|
|
if (typeof value === 'string' && value.length < 3) return '用户名至少需要3个字符'
|
|
if (typeof value === 'string' && !/^[a-zA-Z0-9_]+$/.test(value)) return '用户名只能包含字母、数字和下划线'
|
|
return ''
|
|
case 'email':
|
|
if (!value) return '邮箱不能为空'
|
|
if (typeof value === 'string' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) return '请输入有效的邮箱地址'
|
|
return ''
|
|
case 'password':
|
|
if (!value) return '密码不能为空'
|
|
if (typeof value === 'string' && value.length < 6) return '密码至少需要6个字符'
|
|
if (typeof value === 'string' && !/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(value)) return '密码必须包含大小写字母和数字'
|
|
return ''
|
|
case 'confirmPassword':
|
|
if (!value) return '请确认密码'
|
|
if (value !== formData.password) return '两次输入的密码不一致'
|
|
return ''
|
|
case 'age': {
|
|
if (!value) return '年龄不能为空'
|
|
const age = parseInt(value as string)
|
|
if (isNaN(age) || age < 18 || age > 120) return '年龄必须在18-120之间'
|
|
return ''
|
|
}
|
|
case 'phone':
|
|
if (!value) return '手机号不能为空'
|
|
if (typeof value === 'string' && !/^1[3-9]\d{9}$/.test(value)) return '请输入有效的手机号'
|
|
return ''
|
|
case 'terms':
|
|
if (!value) return '请同意服务条款'
|
|
return ''
|
|
default:
|
|
return ''
|
|
}
|
|
}
|
|
|
|
const handleInputChange = (name: string, value: string | boolean) => {
|
|
console.log(`Input changed: ${name} = ${value}`)
|
|
|
|
setFormData(prev => ({ ...prev, [name]: value }))
|
|
|
|
// 实时验证
|
|
const error = validateField(name, value)
|
|
setErrors(prev => ({ ...prev, [name]: error }))
|
|
}
|
|
|
|
const validateForm = (): boolean => {
|
|
const newErrors: FormErrors = {}
|
|
let isValid = true
|
|
|
|
Object.keys(formData).forEach(key => {
|
|
const error = validateField(key, formData[key as keyof FormData])
|
|
if (error) {
|
|
newErrors[key] = error
|
|
isValid = false
|
|
}
|
|
})
|
|
|
|
setErrors(newErrors)
|
|
return isValid
|
|
}
|
|
|
|
const simulateSubmit = async (): Promise<{ success: boolean; message: string }> => {
|
|
// 模拟网络延迟
|
|
await new Promise(resolve => setTimeout(resolve, 2000 + Math.random() * 2000))
|
|
|
|
// 模拟随机失败
|
|
if (Math.random() < 0.3) {
|
|
throw new Error('网络错误：服务器暂时不可用，请稍后重试')
|
|
}
|
|
|
|
// 模拟服务器验证错误
|
|
if (formData.username.toLowerCase() === 'admin') {
|
|
throw new Error('用户名 "admin" 已被占用，请选择其他用户名')
|
|
}
|
|
|
|
return {
|
|
success: true,
|
|
message: '注册成功！欢迎加入我们的平台。'
|
|
}
|
|
}
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
|
|
if (!validateForm()) {
|
|
setSubmitResult('error')
|
|
setSubmitMessage('请修正表单中的错误')
|
|
return
|
|
}
|
|
|
|
setIsSubmitting(true)
|
|
setSubmitResult(null)
|
|
setSubmitMessage('')
|
|
|
|
try {
|
|
const result = await simulateSubmit()
|
|
setSubmitResult('success')
|
|
setSubmitMessage(result.message)
|
|
} catch (error) {
|
|
setSubmitResult('error')
|
|
setSubmitMessage(error instanceof Error ? error.message : '提交失败，请重试')
|
|
} finally {
|
|
setIsSubmitting(false)
|
|
}
|
|
}
|
|
|
|
const resetForm = () => {
|
|
setFormData({
|
|
username: '',
|
|
email: '',
|
|
password: '',
|
|
confirmPassword: '',
|
|
age: '',
|
|
birthDate: '',
|
|
phone: '',
|
|
website: '',
|
|
bio: '',
|
|
country: '',
|
|
newsletter: false,
|
|
terms: false
|
|
})
|
|
setErrors({})
|
|
setSubmitResult(null)
|
|
setSubmitMessage('')
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-8">
|
|
<div className="max-w-2xl mx-auto px-4">
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8">
|
|
<div className="mb-8">
|
|
<h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
|
|
用户注册表单
|
|
</h1>
|
|
<p className="text-gray-600 dark:text-gray-300">
|
|
测试各种表单输入、验证和提交功能
|
|
</p>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
{/* 用户名 */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
用户名 *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.username}
|
|
onChange={(e) => handleInputChange('username', e.target.value)}
|
|
className={`w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white ${
|
|
errors.username ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'
|
|
}`}
|
|
placeholder="请输入用户名"
|
|
/>
|
|
{errors.username && (
|
|
<p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.username}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* 邮箱 */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
邮箱地址 *
|
|
</label>
|
|
<input
|
|
type="email"
|
|
value={formData.email}
|
|
onChange={(e) => handleInputChange('email', e.target.value)}
|
|
className={`w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white ${
|
|
errors.email ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'
|
|
}`}
|
|
placeholder="请输入邮箱地址"
|
|
/>
|
|
{errors.email && (
|
|
<p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.email}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* 密码 */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
密码 *
|
|
</label>
|
|
<input
|
|
type="password"
|
|
value={formData.password}
|
|
onChange={(e) => handleInputChange('password', e.target.value)}
|
|
className={`w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white ${
|
|
errors.password ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'
|
|
}`}
|
|
placeholder="请输入密码"
|
|
/>
|
|
{errors.password && (
|
|
<p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.password}</p>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
确认密码 *
|
|
</label>
|
|
<input
|
|
type="password"
|
|
value={formData.confirmPassword}
|
|
onChange={(e) => handleInputChange('confirmPassword', e.target.value)}
|
|
className={`w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white ${
|
|
errors.confirmPassword ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'
|
|
}`}
|
|
placeholder="请再次输入密码"
|
|
/>
|
|
{errors.confirmPassword && (
|
|
<p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.confirmPassword}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 年龄和生日 */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
年龄 *
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={formData.age}
|
|
onChange={(e) => handleInputChange('age', e.target.value)}
|
|
className={`w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white ${
|
|
errors.age ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'
|
|
}`}
|
|
placeholder="请输入年龄"
|
|
min="18"
|
|
max="120"
|
|
/>
|
|
{errors.age && (
|
|
<p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.age}</p>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
出生日期
|
|
</label>
|
|
<input
|
|
type="date"
|
|
value={formData.birthDate}
|
|
onChange={(e) => handleInputChange('birthDate', e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 手机和网站 */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
手机号 *
|
|
</label>
|
|
<input
|
|
type="tel"
|
|
value={formData.phone}
|
|
onChange={(e) => handleInputChange('phone', e.target.value)}
|
|
className={`w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white ${
|
|
errors.phone ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'
|
|
}`}
|
|
placeholder="请输入手机号"
|
|
/>
|
|
{errors.phone && (
|
|
<p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.phone}</p>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
个人网站
|
|
</label>
|
|
<input
|
|
type="url"
|
|
value={formData.website}
|
|
onChange={(e) => handleInputChange('website', e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
|
|
placeholder="https://example.com"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 国家选择 */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
国家/地区
|
|
</label>
|
|
<select
|
|
value={formData.country}
|
|
onChange={(e) => handleInputChange('country', e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
|
|
>
|
|
<option value="">请选择国家/地区</option>
|
|
<option value="CN">中国</option>
|
|
<option value="US">美国</option>
|
|
<option value="JP">日本</option>
|
|
<option value="KR">韩国</option>
|
|
<option value="GB">英国</option>
|
|
<option value="DE">德国</option>
|
|
<option value="FR">法国</option>
|
|
<option value="CA">加拿大</option>
|
|
<option value="AU">澳大利亚</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* 个人简介 */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
个人简介
|
|
</label>
|
|
<textarea
|
|
value={formData.bio}
|
|
onChange={(e) => handleInputChange('bio', e.target.value)}
|
|
rows={4}
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
|
|
placeholder="请简单介绍一下自己..."
|
|
/>
|
|
</div>
|
|
|
|
{/* 复选框 */}
|
|
<div className="space-y-3">
|
|
<div className="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
id="newsletter"
|
|
checked={formData.newsletter}
|
|
onChange={(e) => handleInputChange('newsletter', e.target.checked)}
|
|
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
|
/>
|
|
<label htmlFor="newsletter" className="ml-2 block text-sm text-gray-700 dark:text-gray-300">
|
|
订阅我们的新闻通讯
|
|
</label>
|
|
</div>
|
|
<div className="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
id="terms"
|
|
checked={formData.terms}
|
|
onChange={(e) => handleInputChange('terms', e.target.checked)}
|
|
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
|
/>
|
|
<label htmlFor="terms" className="ml-2 block text-sm text-gray-700 dark:text-gray-300">
|
|
我同意 <a href="#" className="text-blue-600 hover:text-blue-500">服务条款</a> 和 <a href="#" className="text-blue-600 hover:text-blue-500">隐私政策</a> *
|
|
</label>
|
|
</div>
|
|
{errors.terms && (
|
|
<p className="text-sm text-red-600 dark:text-red-400">{errors.terms}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* 提交结果 */}
|
|
{submitResult && (
|
|
<div className={`p-4 rounded-md ${
|
|
submitResult === 'success'
|
|
? 'bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-700'
|
|
: 'bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700'
|
|
}`}>
|
|
<p className={`text-sm ${
|
|
submitResult === 'success'
|
|
? 'text-green-800 dark:text-green-200'
|
|
: 'text-red-800 dark:text-red-200'
|
|
}`}>
|
|
{submitMessage}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* 按钮组 */}
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className="flex-1 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-medium py-2 px-4 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
|
>
|
|
{isSubmitting ? (
|
|
<span className="flex items-center justify-center">
|
|
<svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
提交中...
|
|
</span>
|
|
) : (
|
|
'注册账户'
|
|
)}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={resetForm}
|
|
className="flex-1 bg-gray-600 hover:bg-gray-700 text-white font-medium py-2 px-4 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
|
|
>
|
|
重置表单
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div className="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
|
|
<Link href="/" className="text-blue-600 hover:text-blue-500 dark:text-blue-400">
|
|
← 返回测试页面列表
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|