我如何使用表单请求和 ajax json 验证 laravel 8 的响应

Question

我使用 Laravel 有一段时间了，我一直在阅读一些好的做法，我想在表单中发出一个带有验证的 ajax json 请求，我已经看到创建一个类“扩展”更好FormRequest”以更好地管理信息，在我的情况下，我使用的是验证器，但我不知道如何以尽可能简化控制器代码的方式管理它。

目前我有：

控制器：

public function store(Request $request)
{
    if($request->ajax()) {
        $messages = [
            'nombre.required'       => 'El campo nombre es necesario',
            'descripcion.required'  => 'El campo descripción es necesario',
        ];
        $rules = [
            'nombre' => 'required',
            'descripcion' => 'required',
            'url' => 'required|alpha_dash'
        ];
        $validator = Validator::make($request->all(), $rules, $messages);
        if ($validator->fails()) {
            return response()->json([
                'status' => 400,
                'errors' => $validator->messages()//$validator->errors()
            ]);
        } else {
            $crear = new Proyecto([
                'nombre'      => $request->nombre,
                'descripcion' => $request->descripcion,
                'url'         => $request->url
            ]);
            $crear->save();
            
            return response()->json([
                'status' => 200,
                'message' => 'Registro insertado con éxito'
            ]);

        }
    }else{
        return view("404");
    }
}

型号：

class Proyecto extends Model
{
   use HasFactory;
   protected $table = 'proyecto';
   protected $primaryKey = 'id_proyecto';
   protected $fillable = ['nombre', 'descripcion', 'url'];
   public function getRouteKeyName()
   {
       return 'url';
   }
}

js:

$('#crear_proyecto').submit(function(e){
    e.preventDefault();

    var formu = $("#crear_proyecto").serialize();

    $.ajax({
        type: "POST",
        url: "proyecto/crearproyecto",
        data: formu,
        dataType: "json",
        beforeSend:function(){
            $(".loader").show();
        },
        success: function (data) {
            $('#crear_proyecto').find('span.text-danger').remove();
            if (data.status == 400) {
                $.each(data.errors, function (key, error_value) {
                    $('#'+key).after("<span class='text-danger'>"+error_value+"</span>");
                });
                $(".loader").fadeOut("slow");
            }else{
                $(".loader").fadeOut("slow");
                alert(data.message);
                $('#crear_proyecto').trigger("reset");
                $("#nombre").focus();
                $('#modalformu').modal('toggle');
            }
        }
    });

我不知道我之前放的代码是不是一个不好的做法还是那样留下，我看到的是通过创建一个 RequestForm 让控制器尽可能轻松，但我不知道如何用 json 和 ajax 来适应它，我们的想法是做这样的事情：

use Illuminate\Foundation\Http\FormRequest;
use Illuminate\Contracts\Validation\Validator;
use Illuminate\Validation\ValidationException;
class PostProyectoRequest extends FormRequest
{
/**
 * Determine if the user is authorized to make this request.
 *
 * @return bool
 */
public function authorize()
{
    return true;
}

/**
 * Get the validation rules that apply to the request.
 *
 * @return array
 */
public function rules()
{
    return [
        'nombre' => 'required',
        'descripcion' => 'required',
        'url' => 'required|alpha_dash',
    ];
}

public function messages()
{
    return [
        'nombre.required'       => 'El campo nombre es necesario',
        'descripcion.required'  => 'El campo descripción es necesario'
    ];
}

}

编辑 现在我在控制器中有这段代码：

public function store(PostProyectoRequest $request)
{
    $crear = new Proyecto([
        'nombre'      => $request->nombre,
        'descripcion' => $request->descripcion,
        'url'         => $request->url
    ]);

    $crear->save();
    return response()->json([
        'status' => 200,
        'message' => 'Registro insertado con éxito'
    ]);
}

还有这个 y RequestForm

namespace App\Http\Requests;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Foundation\Http\FormRequest;
use Illuminate\Support\Facades\Validator;

class PostProyectoRequest extends FormRequest
{
 /**
  * Determine if the user is authorized to make this request.
  *
  * @return bool
  */
  public function authorize()
  {
     return true;
  }

  /**
  * Get the validation rules that apply to the request.
  *
  * @return array
  */
  public function rules()
 {
     return [
         'nombre'      => 'required',
         'descripcion' => 'required',
         'url'         => 'required|alpha_dash'
     ];
 }

 public function messages()
 {
     return [
         'nombre.required'       => 'El campo nombre es necesario',
         'descripcion.required'  => 'El campo descripción es necesario'
     ];
 }
 protected function failedValidation(Validator $validator)
 {
    if($this->wantsJson())
    {
        $response = response()->json([
            'status' => 400,
            'errors' => $validator->errors()//$validator->errors()
        ]);
    }else{
        $response = redirect()
            ->route('guest.login')
            ->with('message', 'Ops! Some errors occurred')
            ->withErrors($validator);
    }

    throw (new ValidationException($validator, $response))
        ->errorBag($this->errorBag)
        ->redirectTo($this->getRedirectUrl());
}

}

Answer 1

所以你实际上是正确的，你不再需要在控制器中保留旧的验证。你想做这样的事情。

//old 
//public function store(Request $request)

//new
public function store(PostProyectoRequest $request)
{
    $crear = new Proyecto([
        'nombre'      => $request->nombre,
        'descripcion' => $request->descripcion,
        'url'         => $request->url
    ]);
    $crear->save();


    //you can't have two responses because the first one would run only because 
    return response()->json([
        'status' => 200,
        'message' => 'Registro insertado con éxito'
    ]);
    
    //or 
    
    $response = [
        'status' => 200,
        'message' => 'Registro insertado con éxito'
    ];
    return json_encode($response);
}

因此，您将使用您创建的表单请求 PostProyectoRequest，而不是使用普通的 Request 外观。通过这样做，您告诉控制器通过表单请求传递请求，该请求将对其进行验证，如果任何验证失败，它将返回验证错误并且不会在控制器中运行代码。 Read more about form requests here 还阅读了有关 early returns 的信息并返回一般