Vue.js渐进增强PHP渲染表单的策略与实践

<div id="app">
  <form action="https://example.com/submit" method="POST">
    <div class="form-group">
      <label for="name">姓名:</label>
      <input type="text" id="name" name="name" value="<?php echo $_SESSION['name']['value'] ?? ''; ?>" />
      <span class="error-message"><?php echo $_SESSION['name']['error'] ?? ''; ?></span>
    </div>
    <div class="form-group">
      <label for="email">邮箱:</label>
      <input type="email" id="email" name="email" value="<?php echo $_SESSION['email']['value'] ?? ''; ?>" />
      <span class="error-message"><?php echo $_SESSION['email']['error'] ?? ''; ?></span>
    </div>
    <button type="submit" name="submit">提交</button>
  </form>
</div>

<div id="app">
  <form 
    action="https://example.com/submit" 
    method="POST"
    v-on:submit.prevent="submitForm" 
  >
    <div class="form-group">
      <label for="name">姓名:</label>
      <input 
        type="text" 
        id="name" 
        name="name" 
        v-model="formData.name" 
        v-bind:value="initialData.name" 
      />
      <!-- 使用 v-text 确保优雅降级 -->
      <span class="error-message" v-text="errors.name || initialErrors.name"></span>
    </div>
    <div class="form-group">
      <label for="email">邮箱:</label>
      <input 
        type="email" 
        id="email" 
        name="email" 
        v-model="formData.email" 
        v-bind:value="initialData.email" 
      />
      <span class="error-message" v-text="errors.email || initialErrors.email"></span>
    </div>
    <button type="submit" name="submit">提交</button>
  </form>
</div>

<script src="https://unpkg.com/vue@2"></script> <!-- 或 Vue 3 -->
<script>
  new Vue({
    el: '#app',
    data() {
      // 从PHP渲染的HTML中获取初始数据和错误信息
      // 这需要PHP在渲染时将这些数据嵌入到隐藏字段或data属性中，
      // 或者直接从DOM中解析。
      // 为简化示例，我们假设它们已通过某种方式可用。
      return {
        initialData: {
          name: document.querySelector('input[name="name"]').value,
          email: document.querySelector('input[name="email"]').value,
        },
        initialErrors: {
          name: document.querySelector('.form-group:nth-child(1) .error-message').textContent,
          email: document.querySelector('.form-group:nth-child(2) .error-message').textContent,
        },
        formData: {
          name: '',
          email: '',
        },
        errors: {
          name: '',
          email: '',
        },
        // 其他可能的状态，如加载中、提交成功信息等
        isSubmitting: false,
        submitSuccess: false,
        submitError: null,
      };
    },
    created() {
      // 初始化 formData 为 initialData 的值，以便 Vue 接管后能显示正确的值
      this.formData = { ...this.initialData };
    },
    methods: {
      async submitForm() {
        this.isSubmitting = true;
        this.submitError = null;
        this.submitSuccess = false;
        this.errors = { name: '', email: '' }; // 清除之前的客户端错误

        // 1. 客户端验证 (例如，使用 Vuelidate 或手动验证)
        const isValid = this.validateForm(); // 假设存在一个验证方法
        if (!isValid) {
          this.isSubmitting = false;
          return;
        }

        try {
          // 2. AJAX 提交
          const response = await fetch('https://example.com/submit', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json', // 或者 'application/x-www-form-urlencoded'
              'X-Requested-With': 'XMLHttpRequest', // 标识为 AJAX 请求
            },
            body: JSON.stringify(this.formData), // 发送 JSON 数据
          });

          if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.message || '提交失败');
          }

          const result = await response.json();
          this.submitSuccess = true;
          // 处理成功响应，例如显示成功消息，清空表单等
          console.log('提交成功:', result);
          this.formData = { name: '', email: '' }; // 清空表单
        } catch (error) {
          this.submitError = error.message;
          // 处理错误，例如显示错误信息，更新特定字段的错误状态
          console.error('提交错误:', error);
          // 如果后端返回了字段级别的错误，可以更新 this.errors
          if (error.response && error.response.data && error.response.data.errors) {
            this.errors = { ...this.errors, ...error.response.data.errors };
          }
        } finally {
          this.isSubmitting = false;
        }
      },
      validateForm() {
        // 简单的客户端验证示例
        let valid = true;
        if (!this.formData.name) {
          this.errors.name = '姓名不能为空';
          valid = false;
        }
        if (!this.formData.email || !/\S+@\S+\.\S+/.test(this.formData.email)) {
          this.errors.email = '请输入有效的邮箱地址';
          valid = false;
        }
        return valid;
      }
    }
  });
</script>

<!-- PHP 渲染的普通输入框 -->
<input type="tel" name="phone" value="123-456-7890">

<!-- 经过 Vue 增强后，成为自定义的电话号码输入组件 -->
<input v-bind:is="AwesomePhoneNumberInput" type="tel" name="phone" v-model="phoneNumber">