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">
    </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">
    </div>
    <!-- 注意：原始问题中缺少 item_desc 字段，但在验证规则中存在 -->
    <!-- <div class="mb-3">
        <label for="item_desc" class="form-label">商品描述</label>
        <textarea class="form-control" id="item_desc" name="item_desc"></textarea>
    </div> -->
    <button type="submit" class="btn btn-primary">提交</button>
</form>

use Illuminate\Http\Request;
use App\Models\UsrsItem; // 假设你的模型是 UsrsItem

public function new_item(Request $rq)
{
    $validated = $rq->validate(
        [
            'item_name'  => 'required|string|min:4|max:90',
            'item_desc'  => 'string|min:4|max:90', // 注意：表单中没有此字段
            'item_price' => 'required|integer|min:4'
        ]
    );

    // 原始代码中存在潜在的字段名不匹配问题：$validated->item_title vs item_name
    UsrsItem::create([
        'item_name'  => $validated['item_name'], // 更正为使用数组访问或正确的属性名
        'item_price' => $validated['item_price'],
        // 'item_desc' => $validated['item_desc'] // 如果表单有此字段，则也应包含
    ]);

    // 如果验证成功，通常会重定向到另一个页面或返回成功视图
    return redirect()->route('some.success.route')->with('success', '商品添加成功！');
}

<form action="{{ route('newitem') }}" method="post">
    @csrf

    {{-- 验证错误信息显示区域 --}}
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="mb-3">
        <label for="item_name" class="form-label">商品名称</label>
        <input type="text" 
               class="form-control @error('item_name') is-invalid @enderror" 
               id="item_name" 
               name="item_name" 
               value="{{ old('item_name') }}">
        @error('item_name')
            <div class="invalid-feedback">
                {{ $message }}
            </div>
        @enderror
    </div>

    {{-- 如果有 item_desc 字段，也应添加 --}}
    {{-- <div class="mb-3">
        <label for="item_desc" class="form-label">商品描述</label>
        <textarea class="form-control @error('item_desc') is-invalid @enderror" 
                  id="item_desc" 
                  name="item_desc">{{ old('item_desc') }}</textarea>
        @error('item_desc')
            <div class="invalid-feedback">
                {{ $message }}
            </div>
        @enderror
    </div> --}}

    <div class="mb-3">
        <label for="item_price" class="form-label">价格</label>
        <input type="number" 
               class="form-control @error('item_price') is-invalid @enderror" 
               id="item_price" 
               name="item_price" 
               value="{{ old('item_price') }}">
        @error('item_price')
            <div class="invalid-feedback">
                {{ $message }}
            </div>
        @enderror
    </div>

    <button type="submit" class="btn btn-primary">提交</button>
</form>

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

public function new_item(Request $rq)
{
    // 使用 Validator::make() 手动创建验证器实例
    $validator = Validator::make($rq->all(), [
        'item_name'  => 'required|string|min:4|max:90',
        'item_desc'  => 'string|min:4|max:90', // 确保表单中存在此字段，或使其可选
        'item_price' => 'required|integer|min:4'
    ]);

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

    // 验证通过，执行数据创建
    UsrsItem::create([
        'item_name'  => $rq->input('item_name'), // 直接从请求中获取数据
        'item_price' => $rq->input('item_price'),
        'item_desc'  => $rq->input('item_desc', null), // 如果 item_desc 是可选的
    ]);

    // 返回成功响应
    return response()->json(['message' => '商品添加成功！', 'status' => 'success'], 200);
}

// 示例：使用 Fetch API 发送 AJAX 请求
document.getElementById('yourFormId').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为

    const formData = new FormData(this);

    fetch(this.action, {
        method: this.method,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json' // 告诉服务器我们期望 JSON 响应
        },
        body: formData
    })
    .then(response => {
        if (!response.ok) {
            // 如果响应状态码不是 2xx，抛出错误
            return response.json().then(errorData => {
                throw errorData; // 将错误数据作为异常抛出
            });
        }
        return response.json();
    })
    .then(data => {
        // 处理成功响应
        alert(data.message);
        // 清空表单或重定向等
    })
    .catch(error => {
        // 处理错误响应
        if (error.errors) { // 验证错误
            for (const field in error.errors) {
                // 动态显示每个字段的错误信息
                console.error(`Field ${field}: ${error.errors[field].join(', ')}`);
                // 可以在这里更新 DOM，将错误信息显示在对应字段下方
            }
        } else {
            console.error('An unexpected error occurred:', error);
        }
    });
});