在模糊或更少的情况下进行验证

Question

我使用的是Vue 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>

调用DB:

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控制器

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

有了这个库，似乎没有模糊方法，相反，你可以使用去抖动方法

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

<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