验证模糊或更少

Question

我正在将 Vee-validate 4 与 Vue 3 一起使用。我试图验证数据库中的用户名（如果存在）。所以，这就是我的做法

字段：

<div>
                        <div class="relative border border-gray-500 rounded-md px-3 py-2 shadow-sm focus-within:ring-1 focus-within:ring-blue-600 focus-within:border-blue-600 ">
                            <label for="name" value="Name" class="absolute -top-2 left-2 -mt-px inline-block px-1 bg-gray-900 text-sm font-medium text-gray-50">Username</label>
                            <Field @keydown.space.prevent type="text" autocomplete="username" name="name" id="name" v-model="form.name" :rules="validateUsername" validateOnInput required autofocus class="bg-gray-900 text-white block w-full border-0 p-0 placeholder-gray-500 focus:ring-0 sm:text-sm" placeholder="" />
                        </div>
                        <ErrorMessage name="name" class="text-red-500 mt-2" />
                    </div>

调用数据库：

const usernameIsUnique = (name) => 
    axios.post("/api/verify/checkusername", { name })
        .then(({ data }) => data)
        .catch(err => ({ // resolve with error details
        valid: err.response?.data?.valid ?? false,
        data: {
            // get the message from the response if it exists
            message: err.response?.data?.data?.message ?? "Username already registered"
        }
    })); 

异步方法：

async validateUsername(value) {
                // if the field is empty
                if (!value) {
                    return 'This field is required';
                }
                const regex = /^[a-zA-Z0-9_.+-]{4,20}$/i;
                if (!regex.test(value)) {
                    return 'This must be a minimum of 4 characters';
                }
                const check = await usernameIsUnique(value);
                if (check.valid) {
                    return true;
                }
                // All is good
                return check.valid || check.data.message;
            },

我正在处理 2 个问题

• 验证器在每次按键时运行。在我看来，它应该只在 Blur 上运行
• 。验证器区分大小写。我怎样才能使其不区分大小写？

对于第二个问题，请注意我是在 Laravel 的控制器中执行此操作。所以，这是该代码。

Laravel Controller

public function checkUsername(Request $request) {
        Validator::make($request->all(), [
            'name' => ['required', 'string', 'max:255', 'unique:users'],
        ])->validate();
    
        return response()->json([
            'valid' => true,
            'data' => [
                'message' => 'Username is available!'
            ]
        ], 200);
    }

我很困惑，所以我真的可以在这里使用一些指导。

Answer 1

对于该库，似乎没有模糊方法，相反，您可以使用去抖方法

去抖本质上是在用户在一定时间后停止更改值后运行验证，在这种情况下，1秒使用 data-vv-delay="1000" 属性。

<div>
    <div class="relative border border-gray-500 rounded-md px-3 py-2 shadow-sm focus-within:ring-1 focus-within:ring-blue-600 focus-within:border-blue-600 ">
        <label for="name" value="Name" class="absolute -top-2 left-2 -mt-px inline-block px-1 bg-gray-900 text-sm font-medium text-gray-50">Username</label>
        <Field
            @keydown.space.prevent
            type="text"
            autocomplete="username"
            name="name"
            id="name"
            v-model="form.name"
            :rules="validateUsername"
            validateOnInput
            required
            autofocus
            class="bg-gray-900 text-white block w-full border-0 p-0 placeholder-gray-500 focus:ring-0 sm:text-sm"
            placeholder=""
            data-vv-delay="1000"
        />
    </div>
    <ErrorMessage name="name" class="text-red-500 mt-2" />
</div>

至于不敏感的唯一验证，您将必须创建一个新的验证器。

然而app/Providers/AppServiceProvider.php

...

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Validator::extend('iunique', function ($attribute, $value, $parameters, $validator) {
            $query = DB::table($parameters[0]);
            $column = $query->getGrammar()->wrap($parameters[1]);
            return ! $query->whereRaw("lower({$column}) = lower(?)", [$value])->count();
        });
    }
...

并未 100% 验证。从 github 得到这个 https://github.com/laravel/framework/issues /9430#issuecomment-274482274