Laravel email vallidation using js blur with ajax and jquery

Question

我想在不按 laravel 中的提交按钮的情况下验证我的表单。我这里有一些代码，但只有email format is invalid在工作。有人可以告诉我我该怎么办吗？我只是阿贾克斯的新手

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

叶片

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

阿贾克斯

$(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!");
}
});
});

控制器

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验证规则以及unique验证规则，在我看来，最好对输入进行服务器端验证。

前端验证存在风险的原因有很多。以这个问题为例。

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

无论如何，由于您要对后端进行 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);
}
});
});
});

在控制器功能中：

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;
}