表单提交是

<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>  
相关推荐
老码沉思录43 分钟前
写给初学者的React Native 全栈开发实战班
javascript·react native·react.js
我不当帕鲁谁当帕鲁1 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂1 小时前
工程化实战内功修炼测试题
前端·javascript
红中马喽4 小时前
JS学习日记(webAPI—DOM)
开发语言·前端·javascript·笔记·vscode·学习
Black蜡笔小新5 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html
Dread_lxy6 小时前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
奔跑草-7 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与7 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
前端郭德纲7 小时前
浏览器是加载ES6模块的?
javascript·算法
JerryXZR7 小时前
JavaScript核心编程 - 原型链 作用域 与 执行上下文
开发语言·javascript·原型模式