Laravel 表单验证 302 重定向：理解与优雅处理

<form action="{{ route('newitem') }}" method="post">
    @csrf
    <div class="mb-3">
        <label for="item_name" class="form-label">商品名称</label>
        <input type="text" class="form-control" id="item_name" name="item_name" value="{{ old('item_name') }}">
        @error('item_name')
            <div class="text-danger">{{ $message }}</div>
        @enderror
    </div>
    <div class="mb-3">
        <label for="item_price" class="form-label">价格</label>
        <input type="number" class="form-control" id="item_price" name="item_price" value="{{ old('item_price') }}">
        @error('item_price')
            <div class="text-danger">{{ $message }}</div>
        @enderror
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
</form>

{{-- 全局错误列表（可选） --}}
@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

use Illuminate\Http\Request;
use App\Models\UsrsItem; // 假设您的模型名为 UsrsItem

class ItemController extends Controller
{
    public function new_item(Request $request)
    {
        // $request->validate() 会在验证失败时自动重定向并闪存错误
        $validatedData = $request->validate([
            'item_name'  => 'required|string|min:4|max:90',
            'item_price' => 'required|integer|min:1', // 价格通常从1开始
        ]);

        UsrsItem::create([
            'item_name'  => $validatedData['item_name'],
            'item_price' => $validatedData['item_price'],
        ]);

        // 验证成功后，可以重定向到其他页面或返回成功消息
        return redirect()->route('item.success')->with('success', '商品已成功添加！');
    }
}

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator; // 引入 Validator Facade
use App\Models\UsrsItem;

class ItemController extends Controller
{
    public function new_item_ajax(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'item_name'  => 'required|string|min:4|max:90',
            'item_price' => 'required|integer|min:1',
        ]);

        if ($validator->fails()) {
            // 验证失败，返回 JSON 格式的错误信息
            return response()->json(['errors' => $validator->errors()], 422); // 422 Unprocessable Entity
        }

        // 验证成功
        UsrsItem::create([
            'item_name'  => $request->item_name, // 可以直接从 $request 获取，因为已验证
            'item_price' => $request->item_price,
        ]);

        return response()->json(['message' => '商品已成功添加！'], 200);
    }
}

document.getElementById('myForm').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止表单默认提交行为

    const formData = new FormData(this);

    axios.post('{{ route('newitem.ajax') }}', formData)
        .then(response => {
            // 处理成功响应
            console.log(response.data.message);
            alert(response.data.message);
            // 清除表单或重定向
        })
        .catch(error => {
            // 处理错误响应
            if (error.response && error.response.status === 422) {
                // 验证错误
                const errors = error.response.data.errors;
                for (const field in errors) {
                    if (errors.hasOwnProperty(field)) {
                        console.error(`${field}: ${errors[field][0]}`);
                        // 在页面上显示错误，例如在字段旁边显示
                        const errorElement = document.getElementById(`${field}_error`);
                        if (errorElement) {
                            errorElement.textContent = errors[field][0];
                        }
                    }
                }
            } else {
                // 其他类型的错误
                console.error('An unexpected error occurred:', error);
            }
        });
});