vue 提交form表单

博客提及了HTML和Vue相关内容,HTML是前端基础标记语言,Vue是流行的前端框架,二者在前端开发中都有重要作用,可用于构建网页和Web应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

html

 <form>
        <ol>
            <li>您比较喜欢下列哪种运动?</li>
            <label><input type="radio" name="hobby1" value="篮球" v-model="hobby.hobby1" required/>&nbsp;&nbsp;篮球&nbsp;&nbsp;
            </label>
            <label><input type="radio" name="hobby1" value="足球" v-model="hobby.hobby1"/>&nbsp;&nbsp;足球&nbsp;&nbsp; </label>
            <label><input type="radio" name="hobby1" value="飞盘" v-model="hobby.hobby1"/>&nbsp;&nbsp;飞盘&nbsp;&nbsp; </label>
            <label><input type="radio" name="hobby1" value="no" v-model="hobby.hobby1"/>&nbsp;&nbsp;都不喜欢&nbsp;&nbsp; </label>
            <li>您是否会在每年冬天购置新衣裳?</li>
            <label><input type="radio" name="hobby2" value="1" v-model="hobby.hobby2" required/>&nbsp;&nbsp;是&nbsp;&nbsp;
            </label>
            <label><input type="radio" name="hobby2" value="0" v-model="hobby.hobby2"/>&nbsp;&nbsp;否&nbsp;&nbsp; </label>
            <li>您平常有关注过数码领域吗?</li>
            <label><input type="radio" name="hobby3" value="1" v-model="hobby.hobby3" required/>&nbsp;&nbsp;有所关注&nbsp;&nbsp;
            </label>
            <label><input type="radio" name="hobby3" value="0" v-model="hobby.hobby3"/>&nbsp;&nbsp;从未关注&nbsp;&nbsp; </label>

            <li>您有没有了解过计算机专业的知识吗?</li>
            <label><input type="radio" name="hobby4" value="1" v-model="hobby.hobby4" required/>&nbsp;&nbsp;有所关注&nbsp;&nbsp;
            </label>
            <label><input type="radio" name="hobby4" value="0" v-model="hobby.hobby4"/>&nbsp;&nbsp;从未关注&nbsp;&nbsp; </label>
            <li>您是否会和朋友开黑玩游戏?</li>
            <label><input type="radio" name="hobby5" value="1" v-model="hobby.hobby5" required/>&nbsp;&nbsp;有所关注&nbsp;&nbsp;
            </label>
            <label><input type="radio" name="hobby5" value="0" v-model="hobby.hobby5"/>&nbsp;&nbsp;从未关注&nbsp;&nbsp; </label>
            <li>您平常是自己做饭比较多吗?</li>
            <label><input type="radio" name="hobby6" value="1" v-model="hobby.hobby6" required/>&nbsp;&nbsp;有所关注&nbsp;&nbsp;
            </label>
            <label><input type="radio" name="hobby6" value="0" v-model="hobby.hobby6"/>&nbsp;&nbsp;从未关注&nbsp;&nbsp; </label>
        </ol>

        <button @click="submit">提交问卷</button>

    </form>

vue

const vm = new Vue({
        el: '#questionnaire',
        data() {
            return {
                hobby: {
                    hobby1: '',
                    hobby2: '',
                    hobby3: '',
                    hobby4: '',
                    hobby5: '',
                    hobby6: '',
                },
            }
        },
        methods: {
            submit() {
                let formData = new FormData();
                for(var key in this.hobby){
                    formData.append(key,this.hobby[key]);
                }//将数组的值给formdata
                for (var value of formData.values()) {
                    console.log(value);
                }//遍历formdata
                debugger
                console.log(formData);

                //在这里进行上传(axios、ajax)
            }
        },
    })

<think>在Vue3中提交表单通常涉及以下步骤: 1. 使用v-model绑定表单数据 2. 定义表单验证规则(可选) 3. 处理表单提交事件 4. 使用异步请求发送数据 5. 处理响应和错误 下面是一个使用Vue3和Element Plus的示例,展示如何提交一个登录表单。 注意:这里使用Element Plus的组件,但核心逻辑适用于任何UI库。 我们将创建一个包含用户名和密码的表单,并在提交时发送POST请求。</think>以下是一个使用 Vue3 提交表单的完整实现示例,包含表单验证、异步提交和反馈处理: ```vue <template> <div class="form-container"> <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" @submit.prevent="submitForm" > <el-form-item label="用户名" prop="username"> <el-input v-model="formData.username" placeholder="请输入用户名" clearable /> </el-form-item> <el-form-item label="电子邮箱" prop="email"> <el-input v-model="formData.email" placeholder="请输入邮箱" clearable /> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="formData.password" type="password" placeholder="请输入密码" show-password /> </el-form-item> <el-form-item label="确认密码" prop="confirmPassword"> <el-input v-model="formData.confirmPassword" type="password" placeholder="请再次输入密码" show-password /> </el-form-item> <el-form-item label="用户类型" prop="userType"> <el-select v-model="formData.userType" placeholder="请选择用户类型"> <el-option label="普通用户" value="user" /> <el-option label="管理员" value="admin" /> <el-option label="VIP用户" value="vip" /> </el-select> </el-form-item> <el-form-item label="接受协议" prop="agreed"> <el-checkbox v-model="formData.agreed"> 我已阅读并接受<a href="#">用户协议</a> </el-checkbox> </el-form-item> <el-form-item> <el-button type="primary" native-type="submit" :loading="isSubmitting" > 提交 </el-button> <el-button @click="resetForm">重置</el-button> </el-form-item> </el-form> </div> </template> <script setup> import { ref, reactive } from 'vue'; import { ElMessage, ElMessageBox } from 'element-plus'; // 表单引用 const formRef = ref(null); // 表单数据 const formData = reactive({ username: '', email: '', password: '', confirmPassword: '', userType: '', agreed: false }); // 提交状态 const isSubmitting = ref(false); // 表单验证规则 const validatePassword = (rule, value, callback) => { if (value !== formData.password) { callback(new Error('两次输入的密码不一致')); } else { callback(); } }; const formRules = reactive({ username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' } ], email: [ { required: true, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change'] } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }, { pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/, message: '必须包含大小写字母和数字', trigger: 'blur' } ], confirmPassword: [ { required: true, message: '请确认密码', trigger: 'blur' }, { validator: validatePassword, trigger: 'blur' } ], userType: [ { required: true, message: '请选择用户类型', trigger: 'change' } ], agreed: [ { validator: (rule, value, callback) => { if (!value) { callback(new Error('请接受用户协议')); } else { callback(); } }, trigger: 'change' } ] }); // 提交表单 const submitForm = async () => { try { // 验证表单 const valid = await formRef.value.validate(); if (!valid) return; // 设置提交状态 isSubmitting.value = true; // 模拟API请求 const response = await mockApiSubmit(formData); // 处理成功响应 ElMessage.success(response.message); // 重置表单 resetForm(); } catch (error) { // 处理错误 ElMessage.error(error.message || '提交失败,请稍后重试'); } finally { // 重置提交状态 isSubmitting.value = false; } }; // 重置表单 const resetForm = () => { formRef.value.resetFields(); }; // 模拟API提交函数 const mockApiSubmit = (data) => { return new Promise((resolve, reject) => { setTimeout(() => { // 模拟成功响应 if (Math.random() > 0.3) { resolve({ status: 200, message: '表单提交成功!', data: { userId: Math.floor(Math.random() * 10000), ...data } }); } // 模拟失败响应 else { reject({ status: 400, message: '提交失败:服务器内部错误' }); } }, 1500); // 模拟网络延迟 }); }; </script> <style scoped> .form-container { max-width: 600px; margin: 20px auto; padding: 20px; border: 1px solid #ebeef5; border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } .el-form-item:last-child { margin-bottom: 0; } .el-checkbox a { margin-left: 5px; text-decoration: none; color: #409EFF; } </style> ``` ### 代码解释: #### 1. 表单结构 - 使用 Element Plus 的 `<el-form>` 组件创建表单 - 包含各种表单字段:用户名、邮箱、密码、确认密码、下拉选择、复选框 - 使用 `@submit.prevent` 阻止默认表单提交行为 #### 2. 表单数据管理 - 使用 `reactive` 创建响应式表单数据对象 `formData` - 使用 `ref` 管理表单引用和提交状态 #### 3. 表单验证 - 定义 `formRules` 对象包含所有验证规则 - 实现自定义验证函数 `validatePassword` 检查密码一致性 - 使用 `async/await` 处理异步表单验证 #### 4. 表单提交 - `submitForm` 方法处理整个提交流程: - 表单验证 - 设置加载状态 - 发送异步请求 - 处理响应和错误 - 重置加载状态 - 使用 `mockApiSubmit` 模拟 API 请求 #### 5. 用户体验优化 - 显示加载状态(提交按钮的 loading 效果) - 成功/失败的消息反馈 - 表单重置功能 - 密码强度验证(包含大小写字母和数字) ### 实际应用建议: 1. **真实 API 集成**: ```javascript const realApiSubmit = async (data) => { try { const response = await axios.post('/api/submit-form', data); return response.data; } catch (error) { throw new Error(error.response?.data?.message || '请求失败'); } }; ``` 2. **表单数据预处理**: ```javascript const submitForm = async () => { // 预处理数据(移除不需要的字段) const submitData = { username: formData.username, email: formData.email, password: formData.password, userType: formData.userType }; // 发送处理后的数据 await api.submit(submitData); }; ``` 3. **防重复提交**: ```javascript // 在提交方法开始处添加 if (isSubmitting.value) return; ``` 4. **表单自动填充处理**: ```javascript onMounted(() => { // 从本地存储恢复表单数据 const savedData = localStorage.getItem('formDraft'); if (savedData) { Object.assign(formData, JSON.parse(savedData)); } }); // 监听表单变化自动保存草稿 watch(formData, (newValue) => { localStorage.setItem('formDraft', JSON.stringify(newValue)); }, { deep: true }); ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值