<template>
<el-form :model="form" :rules="rules" ref="form" label-width="120px">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model="form.age"></el-input>
</el-form-item>
<el-form-item label="住址" prop="address">
<el-input v-model="form.address"></el-input>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input v-model="form.phone"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('form')">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
age: '',
address: '',
phone: ''
},
rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
{ min: 18, max: 100, message: '年龄在 18 到 100 岁之间', trigger: 'blur' }
],
address: [
{ required: true, message: '请输入住址', trigger: 'blur' },
{ min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }
],
phone: [
{ required: true, message: '请输入电话号码', trigger: 'blur' },
{ pattern: /^1[3456789]\d{9}$/, message: '请输入正确的电话号码', trigger: 'blur' }
]
},
apiUrl: 'https://example.com/api/submit' // 后端接口的URL
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
// 表单验证通过,提交表单数据到后端接口
axios.post(this.apiUrl, this.form)
.then((response) => {
// 后端接口返回成功处理逻辑...
console.log('提交成功');
})
.catch((error) => {
// 后端接口返回失败处理逻辑...
console.log('提交失败');
});
} else {
// 表单验证失败,显示错误信息...
console.log('表单验证失败');
return false;
}
});
}
}
}
</script>
表单提交是
阿金要当大魔王~~2023-11-14 15:43
相关推荐
Hilaku24 分钟前
工作 5 年后,决定你薪资上限的究竟是什么?weixin_BYSJ198736 分钟前
springboot校园自习室管理小程序---附源码32142gis开发之家2 小时前
《Vue3 从入门到大神40篇》Vue3 源码详解(十):diff 算法全解析 —— 为什么 Vue3 比 Vue2 更快?用户83134859306982 小时前
Vue+Three.js实现PCB电路板3D交互:元器件点击高亮、部件显隐、模型自动旋转海带紫菜菠萝汤3 小时前
WebCodecs API 实战:浏览器原生视频编解码的原理与性能测试GitLqr4 小时前
提升 Web 开发效率:我常用的 10 个 TypeScript 实战技巧前端炒粉4 小时前
简易实现ssrmeilindehuzi_a5 小时前
Node.js + LangChain.js + Milvus 实战:从 EPUB 入库到《天龙八部》RAG 问答系统勇往直前plus6 小时前
Vue3(篇四)单页面应用到路由管理不简说7 小时前
JS 代码技巧 vol.9 — 20 个设计模式在真实项目里的应用