救命！表单完成率提升 42% 的秘密：2025 年前端大佬都在用的实战方案

<!-- Tailwind CSS 实现的带状态输入框 -->
<div class="space-y-1 w-80 mx-auto">
  <label for="phone" class="block text-sm font-medium text-gray-700">手机号</label>
  <div class="relative rounded-md shadow-sm">
    <input 
      type="tel" 
      id="phone" 
      class="block w-full pr-10 border-green-300 rounded-md focus:ring-green-500 focus:border-green-500 sm:text-sm" 
      value="138 1234 5678"
    > 
    <!-- 成功状态图标 -->
    <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
      <svg class="h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
      </svg>
    </div>
  </div>
</div>

// 密码可见性切换函数
function togglePasswordVisibility(btn) {
  const input = btn.previousElementSibling;
  const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
  input.setAttribute('type', type);
  // 切换图标
  btn.innerHTML = type === 'password' 
    ? '<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>'
    : '<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.625a1.125 1.125 0 01-1.75 0l-8.628-8.629a1.125 1.125 0 010-1.59A1.125 1.125 0 015.25 7.375v-1.5a1.125 1.125 0 012.25 0v1.5a3.375 3.375 0 003.375 3.375h1.5a1.125 1.125 0 010 2.25h-1.5a3.375 3.375 0 00-3.375 3.375v1.5a1.125 1.125 0 01-1.125 1.125z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16.5 16.5l-5.25-5.25m1.5 0l3 3m-3-3l3-3"/></svg>';
}

<template>
  <form @submit.prevent="handleSubmit" class="max-w-2xl mx-auto p-6 bg-white rounded-lg shadow">
    <h3 class="text-lg font-semibold mb-4">收货地址管理</h3>
    <!-- 动态地址列表 -->
    <div class="space-y-4" v-for="(addr, index) in form.addresses" :key="index">
      <div class="p-4 border rounded-lg bg-gray-50">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <!-- 收货人 -->
          <div class="space-y-1">
            <label class="block text-sm font-medium">收货人</label>
            <input 
              v-model="addr.receiver" 
              @input="validateField(`receiver-${index}`)"
              class="w-full p-2 border rounded"
            >
            <p v-if="errors[`receiver-${index}`]" class="text-xs text-red-500">{{ errors[`receiver-${index}`] }}</p>
          </div>
          <!-- 手机号 -->
          <div class="space-y-1">
            <label class="block text-sm font-medium">手机号</label>
            <input 
              v-model="addr.phone" 
              @input="formatPhone(addr)"
              @blur="validateField(`phone-${index}`)"
              class="w-full p-2 border rounded"
            >
            <p v-if="errors[`phone-${index}`]" class="text-xs text-red-500">{{ errors[`phone-${index}`] }}</p>
          </div>
        </div>
        <!-- 地址 -->
        <div class="space-y-1 mt-3">
          <label class="block text-sm font-medium">详细地址</label>
          <input 
            v-model="addr.detail" 
            @blur="validateField(`detail-${index}`)"
            class="w-full p-2 border rounded"
          >
          <p v-if="errors[`detail-${index}`]" class="text-xs text-red-500">{{ errors[`detail-${index}`] }}</p>
        </div>
        <!-- 删除按钮 -->
        <button 
          @click="removeAddress(index)"
          :disabled="form.addresses.length === 1"
          class="mt-3 text-red-500 text-sm disabled:opacity-50"
        >
          删除地址
        </button>
      </div>
    </div>
    <!-- 添加地址 -->
    <button 
      type="button" 
      @click="addAddress"
      class="mt-2 px-4 py-2 border border-indigo-500 text-indigo-500 rounded"
    >
      + 添加新地址
    </button>
    <!-- 提交按钮 -->
    <button 
      type="submit"
      class="mt-4 w-full py-2 bg-indigo-500 text-white rounded hover:bg-indigo-600"
    >
      保存地址
    </button>
  </form>
</template>

<script setup>
import { reactive, ref } from 'vue';

// 表单数据
const form = reactive({
  addresses: [{ receiver: '', phone: '', detail: '' }]
});

// 错误信息
const errors = ref({});

// 手机号格式化
const formatPhone = (addr) => {
  addr.phone = addr.phone.replace(/\D/g, '').replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3');
};

// 验证字段
const validateField = (field) => {
  const [type, index] = field.split('-');
  const value = form.addresses[index][type].trim();
  
  // 清空之前的错误
  errors.value[field] = '';
  
  // 验证逻辑
  if (!value) {
    errors.value[field] = `${type === 'receiver' ? '收货人' : type === 'phone' ? '手机号' : '地址'}不能为空`;
  } else if (type === 'phone' && !/^1[3-9]\d{2} \d{4} \d{4}$/.test(value)) {
    errors.value[field] = '手机号格式不正确（示例：138 1234 5678）';
  }
};

// 添加地址
const addAddress = () => {
  form.addresses.push({ receiver: '', phone: '', detail: '' });
};

// 删除地址
const removeAddress = (index) => {
  form.addresses.splice(index, 1);
};

// 提交表单
const handleSubmit = () => {
  // 全量验证
  let isValid = true;
  form.addresses.forEach((_, index) => {
    ['receiver', 'phone', 'detail'].forEach(type => {
      validateField(`${type}-${index}`);
      if (errors.value[`${type}-${index}`]) isValid = false;
    });
  });
  
  if (isValid) {
    console.log('提交地址：', form.addresses);
    alert('地址保存成功！');
  }
};
</script>

import { useReducer, useCallback } from 'react';
import { useForm } from 'react-hook-form';
import debounce from 'lodash/debounce';

// 表单reducer
const formReducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_FIELD':
      return { ...state, [action.field]: action.value };
    case 'SET_ERROR':
      return { ...state, errors: { ...state.errors, [action.field]: action.msg } };
    default:
      return state;
  }
};

export default function OrderForm() {
  const [state, dispatch] = useReducer(formReducer, {
    goodsName: '',
    quantity: 1,
    price: 0,
    errors: {}
  });

  // 防抖验证（300ms延迟）
  const validateField = useCallback(
    debounce((field, value) => {
      let msg = '';
      if (field === 'goodsName' && value.length < 2) {
        msg = '商品名称至少2个字符';
      } else if (field === 'quantity' && (value < 1 || value > 100)) {
        msg = '数量需在1-100之间';
      }
      dispatch({ type: 'SET_ERROR', field, msg });
    }, 300),
    []
  );

  // 处理输入变化
  const handleChange = (e) => {
    const { name, value } = e.target;
    dispatch({ type: 'UPDATE_FIELD', field: name, value });
    validateField(name, value); // 触发防抖验证
  };

  return (
    <form className="max-w-2xl mx-auto p-6">
      <div className="space-y-4">
        <div>
          <label className="block text-sm font-medium">商品名称</label>
          <input
            name="goodsName"
            value={state.goodsName}
            onChange={handleChange}
            className="w-full p-2 border rounded"
          />
          {state.errors.goodsName && (
            <p className="text-xs text-red-500">{state.errors.goodsName}</p>
          )}
        </div>
        {/* 更多字段... */}
        <button
          type="submit"
          className="w-full py-2 bg-green-500 text-white rounded"
        >
          提交订单
        </button>
      </div>
    </form>
  );
}

<!-- Vue 懒加载示例 -->
<template>
  <div>
    <component :is="`Step${currentStep}`" v-if="showStep[currentStep]" />
  </div>
</template>