javascript - 使用带有 ajax 和 jquery 的 js 模糊的 Laravel 电子邮件验证

Question

我想在不按 Laravel 中的提交按钮的情况下验证我的表单。我这里有一些代码，但只有 email format is invalid 有效。有人可以告诉我应该怎么做吗？我只是 ajax 的新手

PS:输入有效电子邮件时收到的消息 {readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, ...}

Blade

  <input  type="email" class="form-control" id="inputEmail" name="inputEmail" placeholder="Email" required value="{{ old('inputEmail') }}">

Ajax

   $(document).ready(function () {
    const emailValidation = document.querySelector('#inputEmail');
    const mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; 
    emailValidation.addEventListener('blur', e => { 
      if (emailValidation.value.match(mailformat)) {

        $.ajax({
          type: 'get',
          url: '/emailValidation', 
          _token: "{{ csrf_token() }}",
          data: {
            'emailValidation': emailValidation.value, 
          },
          success: function (data) {
            if (data.validOrNot === "not taken"){
              console.log("it works!");
            } else {
              console.log("email taken!");

            }
          },
          error: function (error) {
            console.log(error);
          }
        });
      } else {

        console.log("Email format is invalid!");

      }
    });
  });

Controller

 public function emailValidation(Request $request){
        // $user = new User;
        $user = User::where('email', '=', Input::get('inputEmail'))->first();
        $emailPassed = $request->emailValidation;

        if ($user===null)
          return response()->json(['validOrNot' => 1]);
        else
          return response()->json(['validOrNot' => 0]);


      }

路线

    Route::get('/emailValidation', 'TeachersController@emailValidation');

Answer 1

如果你看一下官方文档，Laravel 有它自己的 email validation rule以及 unique validation rule而且，在我看来，对输入进行服务器端验证总是更好。

前端验证存在风险的原因有很多。看看at this question例如。

另外，你的正则表达式是错误的。 我还没有测试过 编辑:我已经在 regexr.com 上试过了，它不起作用但是有很多主题以及 this question这可以为您提供更精确的正则表达式。

无论如何，由于您正在对后端进行 Ajax 调用以进行验证，因此您应该按如下方式更改代码:

$(document).ready(function() {
  const emailValidation = document.querySelector('#inputEmail');

  emailValidation.addEventListener('blur', e => {
    // Let the backend do all the validation magic on blur
    $.ajax({
      type: 'get',
      url: '/emailValidation',
      _token: "{{ csrf_token() }}",
      data: {
        'email': emailValidation.value,
      },
      success: function(data) {
        // No need to check the data since it's a valid e-mail
      },
      error: function(error) {
        console.log(error);
      }
    });
  });
});

在你的 Controller 函数中:

public function emailValidation(Request $request) {
  // Validation
  $this->validate($request, [
    'email' => 'required|email|unique:users'
  ]);

  // Validation passes. Just send an empty response with 200 status code
  return new Response;
}