vue实现表单页

基础表单实现

在Vue中创建表单需要使用v-model指令实现双向数据绑定。以下是一个基础表单示例：

<template>
  <form @submit.prevent="handleSubmit">
    <label for="username">用户名:</label>
    <input 
      id="username" 
      type="text" 
      v-model="form.username"
    >

    <label for="password">密码:</label>
    <input 
      id="password" 
      type="password" 
      v-model="form.password"
    >

    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      console.log('提交的数据:', this.form)
      // 这里可以添加表单验证和提交逻辑
    }
  }
}
</script>

表单验证

Vue表单验证可以通过Vuelidate或自定义验证方法实现。以下是自定义验证示例：

<template>
  <form @submit.prevent="handleSubmit">
    <div>
      <label>邮箱:</label>
      <input 
        type="email" 
        v-model="form.email"
        @blur="validateEmail"
      >
      <span v-if="errors.email">{{ errors.email }}</span>
    </div>

    <button type="submit" :disabled="!isValid">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        email: ''
      },
      errors: {
        email: ''
      }
    }
  },
  computed: {
    isValid() {
      return !this.errors.email && this.form.email
    }
  },
  methods: {
    validateEmail() {
      const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      this.errors.email = regex.test(this.form.email) 
        ? '' 
        : '请输入有效的邮箱地址'
    },
    handleSubmit() {
      if(this.isValid) {
        // 提交逻辑
      }
    }
  }
}
</script>

动态表单字段

对于需要动态增减的表单字段，可以使用数组管理：

<template>
  <form @submit.prevent="handleSubmit">
    <div v-for="(field, index) in form.fields" :key="index">
      <input 
        v-model="field.value"
        :placeholder="field.placeholder"
      >
      <button @click="removeField(index)">删除</button>
    </div>

    <button @click="addField">添加字段</button>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        fields: [
          { value: '', placeholder: '字段1' }
        ]
      }
    }
  },
  methods: {
    addField() {
      this.form.fields.push({
        value: '',
        placeholder: `字段${this.form.fields.length + 1}`
      })
    },
    removeField(index) {
      this.form.fields.splice(index, 1)
    },
    handleSubmit() {
      console.log('提交数据:', this.form.fields)
    }
  }
}
</script>

表单组件化

将表单字段封装为可复用组件：

<!-- TextInput.vue -->
<template>
  <div>
    <label v-if="label">{{ label }}</label>
    <input
      :type="type"
      :value="value"
      @input="$emit('input', $event.target.value)"
    >
    <span v-if="error" class="error">{{ error }}</span>
  </div>
</template>

<script>
export default {
  props: {
    value: [String, Number],
    label: String,
    type: {
      type: String,
      default: 'text'
    },
    error: String
  }
}
</script>

使用表单组件：

<template>
  <form @submit.prevent="handleSubmit">
    <text-input 
      label="用户名"
      v-model="form.username"
      :error="errors.username"
    ></text-input>

    <text-input 
      label="密码"
      type="password"
      v-model="form.password"
      :error="errors.password"
    ></text-input>

    <button type="submit">提交</button>
  </form>
</template>

<script>
import TextInput from './TextInput.vue'

export default {
  components: { TextInput },
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      errors: {}
    }
  },
  methods: {
    handleSubmit() {
      // 验证和提交逻辑
    }
  }
}
</script>

表单提交与API集成

集成Axios进行表单提交：

<template>
  <form @submit.prevent="submitForm">
    <!-- 表单字段 -->
    <button type="submit" :disabled="isSubmitting">
      {{ isSubmitting ? '提交中...' : '提交' }}
    </button>
  </form>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      form: {
        /* 表单数据 */
      },
      isSubmitting: false,
      submitError: null
    }
  },
  methods: {
    async submitForm() {
      this.isSubmitting = true
      this.submitError = null

      try {
        const response = await axios.post('/api/submit', this.form)
        console.log('提交成功:', response.data)
        // 处理成功逻辑
      } catch (error) {
        this.submitError = error.response?.data?.message || '提交失败'
      } finally {
        this.isSubmitting = false
      }
    }
  }
}
</script>