Question

当用户输入一个或多个错误的凭据时，将出现一个模式。问题是我不知道如何从控制器到视图建立此连接。可能需要一个ajax吗？

控制器：

      public function login()
  {
    return view('login');
  }

  public function logar(Request $req)
  {
    $data = $req->all();
    $verify = Auth::attempt(['email' => $data['email'], 'password' => $data['password']]);
    $this->validate($req, [
      'email' => [
        'required',
        'email',
      ]
    ]);
    if ($verify) {
      return redirect()->route('shop.index');
    }
    return redirect()->route('shop.login');
  }

查看：

                <form class="login-form needs-validation" method="POST" action="{{ route('loja.logar') }}" novalidate>
                    <meta name="csrf-token" content="{{ csrf_token() }}">
                    @csrf
                    <div class="form-group">
                        <input type="email" class="form-control w-50 mx-auto my-0 py-4" id="email" name="email" aria-describedby="emailHelp" placeholder="Email" required>
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control w-50 mx-auto my-0 py-4" id="password" name="password" placeholder="Senha" required>
                    </div>
                    <button type="submit" id="submit" name="submit" class="btn btn-outline-primary mt-2 py-3 px-4">Enviar</button>
                </form>

               <div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                  <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalCenterTitle">Error</h5>
                       </div>
                       <div class="modal-body">
                         Login or password incorrect! Try again.
                       </div>
                     </div>
                   </div>
                 </div>

Answer 1

您有两种实际上不同的情况，验证和验证。如果验证错误消息使用模态，验证错误消息是否也使用模态？

否（简短回答）

if ($verify) {
    return redirect()->route('shop.index');
}

return redirect()->route('shop.login', ['status' => 'error']);

@if(request()->input('status') == 'error')
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">Error</h5>
            </div>
            <div class="modal-body">
                Login or password incorrect! Try again.
            </div>
        </div>
    </div>
</div>
@endif

@if(request()->input('status') == 'error')
<script type="text/javascript">
    $("#modal1").modal('show');
</script>
@endif

是（很长的答案）

我不知道$this->validate的作用，但是我认为它与validate对象提供的Illuminate\Http\Request方法是一样的。

如果查看默认的LoginController，您将发现验证错误消息与验证相同，使用：

throw ValidationException::withMessages([
    $this->username() => [trans('auth.failed')],
]);

这意味着您将同时执行两项操作。但是在您的情况下，您将它们分开。

/******** VALIDATION ********/
// if validation fails, an exception will be thrown and 
// the proper error response will automatically be sent back to the user.
$input = $req->validate($req, [
    'email'    => ['required', 'email'],
    'password' => ['required'],
]);

/******** VERIFICATION ********/
$verify = Auth::attempt(['email' => $data['email'], 'password' => $data['password']]);

if ($verify) {
    return redirect()->route('shop.index');
}

// return redirect()->route('shop.login', ['status' => 'error']);
// or 
return redirect()->route('shop.login')
    ->with('status-verification', 'Login or password incorrect! Try again.');

@if($errors->any())
<div class="modal fade" id="modal-validation" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">Error Validation</h5>
            </div>
            <div class="modal-body">
                <ul>
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</div>
@endif

@if(session('status-verification'))
<div class="modal fade" id="modal-verification" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">Error</h5>
            </div>
            <div class="modal-body">
                {{ session('status-verification') }}
            </div>
        </div>
    </div>
</div>
@endif

<script type="text/javascript">
    @if($errors->any())
        $("#modal-validation").modal('show');
    @endif

    @if(session('status-verification'))
        $("#modal-verification").modal('show');
    @endif
</script>

Answer 2

您可以在要调用模式的地方使用此脚本。

<script type="text/javascript">
$("#modal1").modal();
</script>

或

<script type="text/javascript">
$("#modal1").modal('show');
</script>

需要引导程序和jquery库才能工作。

Answer 3

如果您不想使用模板，我认为您应该使用ajax来检索验证。 但是我认为您一定要使用模板来简化它。 ...显然，ajax可以处理它，但是我认为ajax并不是解决此类问题的正确方法。 很抱歉，我对模板说的很多，但我发现看到您不使用模板而感到失望 Visit blade template和 Visit twig template

如果用户输入了错误的凭据，则显示带有错误的模式

3 个答案:

否（简短回答）

是（很长的答案）