218 lines
6.3 KiB
Vue
218 lines
6.3 KiB
Vue
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
|
||
// 表单数据
|
||
const formData = ref({
|
||
name: '',
|
||
email: '',
|
||
phone: '',
|
||
message: ''
|
||
})
|
||
|
||
// 错误信息
|
||
const errors = ref({
|
||
name: '',
|
||
email: '',
|
||
phone: '',
|
||
message: ''
|
||
})
|
||
|
||
// 表单验证
|
||
const validateForm = () => {
|
||
let isValid = true
|
||
errors.value = { name: '', email: '', phone: '', message: '' }
|
||
|
||
// 姓名验证
|
||
if (!formData.value.name.trim()) {
|
||
errors.value.name = '请输入姓名'
|
||
isValid = false
|
||
} else if (formData.value.name.length < 2) {
|
||
errors.value.name = '姓名至少需要2个字符'
|
||
isValid = false
|
||
}
|
||
|
||
// 邮箱验证
|
||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||
if (!formData.value.email) {
|
||
errors.value.email = '请输入邮箱'
|
||
isValid = false
|
||
} else if (!emailRegex.test(formData.value.email)) {
|
||
errors.value.email = '请输入有效的邮箱地址'
|
||
isValid = false
|
||
}
|
||
|
||
// 电话验证
|
||
const phoneRegex = /^1[3-9]\d{9}$/
|
||
if (!formData.value.phone) {
|
||
errors.value.phone = '请输入电话'
|
||
isValid = false
|
||
} else if (!phoneRegex.test(formData.value.phone)) {
|
||
errors.value.phone = '请输入有效的手机号码'
|
||
isValid = false
|
||
}
|
||
|
||
// 留言验证
|
||
if (!formData.value.message.trim()) {
|
||
errors.value.message = '请输入留言内容'
|
||
isValid = false
|
||
} else if (formData.value.message.length < 10) {
|
||
errors.value.message = '留言内容至少需要10个字符'
|
||
isValid = false
|
||
}
|
||
|
||
return isValid
|
||
}
|
||
|
||
// 提交表单
|
||
const submitForm = (event: Event) => {
|
||
event.preventDefault()
|
||
|
||
if (validateForm()) {
|
||
// 在控制台打印表单值
|
||
console.log('表单提交数据:', JSON.parse(JSON.stringify(formData.value)))
|
||
|
||
// 这里可以添加实际的提交逻辑，如API请求
|
||
// axios.post('/api/submit', formData.value)
|
||
|
||
// 提交成功后重置表单
|
||
formData.value = { name: '', email: '', phone: '', message: '' }
|
||
alert('表单提交成功！')
|
||
} else {
|
||
console.log('表单验证失败:', errors.value)
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<form class="space-y-6" @submit="submitForm">
|
||
<!-- 姓名 -->
|
||
<div data-aos="fade-up" data-aos-delay="200">
|
||
<label for="name" class="block text-sm font-medium text-blue-200 mb-1">姓名</label>
|
||
<input
|
||
type="text"
|
||
id="name"
|
||
v-model="formData.name"
|
||
class="w-full px-4 py-2 rounded-lg border border-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-400 bg-blue-900/50 text-white"
|
||
placeholder="请输入您的姓名"
|
||
:class="{ 'border-red-500': errors.name }"
|
||
>
|
||
<div v-if="errors.name" class="text-red-400 text-sm mt-1">{{ errors.name }}</div>
|
||
</div>
|
||
|
||
<!-- 邮箱 -->
|
||
<div data-aos="fade-up" data-aos-delay="250">
|
||
<label for="email" class="block text-sm font-medium text-blue-200 mb-1">邮箱</label>
|
||
<input
|
||
type="email"
|
||
id="email"
|
||
v-model="formData.email"
|
||
class="w-full px-4 py-2 rounded-lg border border-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-400 bg-blue-900/50 text-white"
|
||
placeholder="请输入您的邮箱"
|
||
:class="{ 'border-red-500': errors.email }"
|
||
>
|
||
<div v-if="errors.email" class="text-red-400 text-sm mt-1">{{ errors.email }}</div>
|
||
</div>
|
||
|
||
<!-- 电话 -->
|
||
<div data-aos="fade-up" data-aos-delay="300">
|
||
<label for="phone" class="block text-sm font-medium text-blue-200 mb-1">电话</label>
|
||
<input
|
||
type="tel"
|
||
id="phone"
|
||
v-model="formData.phone"
|
||
class="w-full px-4 py-2 rounded-lg border border-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-400 bg-blue-900/50 text-white"
|
||
placeholder="请输入您的电话"
|
||
:class="{ 'border-red-500': errors.phone }"
|
||
>
|
||
<div v-if="errors.phone" class="text-red-400 text-sm mt-1">{{ errors.phone }}</div>
|
||
</div>
|
||
|
||
<!-- 留言 -->
|
||
<div data-aos="fade-up" data-aos-delay="350">
|
||
<label for="message" class="block text-sm font-medium text-blue-200 mb-1">留言内容</label>
|
||
<textarea
|
||
id="message"
|
||
v-model="formData.message"
|
||
rows="4"
|
||
class="w-full px-4 py-2 rounded-lg border border-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-400 bg-blue-900/50 text-white"
|
||
placeholder="请输入您的留言内容"
|
||
:class="{ 'border-red-500': errors.message }"
|
||
></textarea>
|
||
<div v-if="errors.message" class="text-red-400 text-sm mt-1">{{ errors.message }}</div>
|
||
</div>
|
||
|
||
<!-- 提交按钮 - 优化版 -->
|
||
<button
|
||
type="submit"
|
||
class="w-full bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white font-medium py-3 px-6 rounded-lg flex items-center justify-center transition-all duration-300 transform hover:-translate-y-1 shadow-lg hover:shadow-xl active:translate-y-0 active:shadow-md"
|
||
data-aos="fade-up"
|
||
data-aos-delay="400"
|
||
>
|
||
<i class="fas fa-paper-plane mr-2 transform group-hover:translate-x-1 transition-transform"></i>
|
||
<span class="group-hover:font-semibold transition-all">提交申请</span>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* 添加输入框聚焦时的动画效果 */
|
||
input:focus, textarea:focus {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
/* 错误提示动画 */
|
||
.text-red-400 {
|
||
animation: fadeIn 0.3s ease;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(-5px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
/* 按钮悬停效果 */
|
||
button {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
button::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 5px;
|
||
height: 5px;
|
||
background: rgba(255, 255, 255, 0.5);
|
||
opacity: 0;
|
||
border-radius: 100%;
|
||
transform: scale(1, 1) translate(-50%);
|
||
transform-origin: 50% 50%;
|
||
}
|
||
|
||
button:focus:not(:active)::after {
|
||
animation: ripple 1s ease-out;
|
||
}
|
||
|
||
@keyframes ripple {
|
||
0% {
|
||
transform: scale(0, 0);
|
||
opacity: 0.7;
|
||
}
|
||
100% {
|
||
transform: scale(50, 50);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
/* 按钮图标动画 */
|
||
button:hover i {
|
||
transform: translateX(5px);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
</style>
|