Laravel - 在使用 jQuery AJAX 提交表单之前检查用户名是否已存在

Question

我制作了一个包含很多字段的注册表。由于当我提交数据并且验证器因错误而重定向回来时，某些输入为空，并且用户必须浪费时间重新填充它们，因此我想实现一些前端验证。 我一直在检查用户名是否已在按下提交按钮时使用，因为我不是 AJAX 专家。

在 AuthController 中，我创建了一个函数，该函数返回一个 Json，其中包含与数据库中用户名是否存在相关的响应。

class UserAuthController extends Controller
{
    public function isUserNameInUse( $username )
    {
        if (Auth::where('username', $username) != null){
            return [ 'is_used' => 1 ];
        }

            return [ 'is_used' => 0 ];
    }
}

在routes.php中有这些行：

Route::group([ 'as' => 'api', 'prefix' => 'api', 'namespace' => 'Api'], function () {

     Route::group([ 'as' => 'auth', 'prefix' => 'auth'], function () {
          Route::any('/is_username_in_use/{username}', [
            'as' => 'isUserNameInUse',
            'uses' => 'UserAuthController@isUserNameInUse']);


    });

});

视图是这样的（只是表格的一部分）：

<form action="{{ route('web.company.postSignup') }}" method="post" id="signup-form" class="form-horizontal">
            {!! csrf_field() !!}
            @include( 'errors.handler' )

                            <label for="username">
                                {{ _('Username*') }} </label>
                            <input type="text" class="form-control" name="username" id="username"
                                   value="{{ Input::old('username') }}" required>

                            <label for="password">
                                {{ _('Password*') }}
                            </label>

                            <input type="password" class="form-control" name="password" id="password"
                                   value="{{ Input::old('password') }}" onchange="form.confirmPassword.pattern = this.value;"
                                   required>

                            <label for="confirmPassword">
                                {{ _('Confirm Password*') }}
                            </label>

                            <input type="password" class="form-control" name="confirmPassword" id="confirmPassword" required>
                            <button class="btn btn-warning" id="submit-btn" type="submit">{{ _('Sign Up') }}</button>

</form> 

这是脚本，目前我只尝试记录控制器的响应，但它会打印任何内容。

$(document).ready(function () {
    $('form#signup-form').submit(function () {
         var input_username = $('input[name=username]').val();
         console.log(input_username);

        $.getJSON('/api/auth/is_username_in_use/' + input_username, function (json) {

            console.log(json);


            });
            return false;
        });

    });

Answer 1

无需明确检查用户名是否正在使用。您可以跳过这一部分，而是在存储用户数据时相应地验证它们。

这方面的一个例子可能是

public function store(Request $request)
{
    $this->validate($request, [
        'username' => 'required|unique:users',
        'password' => 'required|confirmed'
    ]);

    // process your logic
}

这样，如果验证失败，您将获得一个包含错误消息的 json 响应对象。

---

注意，如果您处于

Laravel 5

状态，这将起作用。如果您使用

4.*

请参阅文档以了解验证部分。

Answer 2

您应该将

return [ 'is_used' => 0 ];

更改为

return Response::json([ 'is_used' => 0 ]);

并将

use Response;

添加到控制器顶部。

Answer 3

Today I worked on the same kind of problem and here is my working code. Hope it could help you achieve your goal.

    

//Ajax code
    $(document).ready(function () {
    var userName = $('#userName');
    userName.blur(function () {
    var username = $(this).val();
    $.ajax({
    url: '/checkUsername',
    method: 'POST',
    data: { user_name: username },
    success: function (data) {
    if (data.exists) {
//Do whatever you want
    }

//route code
    Route::POST('/checkUsername', [UserController::class, 'validUsername'])- 
    >name('users.validUsername');

//Controller code

    public function validUsername(Request $request)
    {
        $username = $request->input('user_name');
        $exists = User::where('user_name', $username)->exists();
        return response()->json(['exists' => $exists]);
    }