用jquery的驗證插件validation plugin,進行remote驗證的時候,文檔中說服務端需要返回json字符串,true代表有效, "false", undefined, null 代表無效。
需要驗證的是用戶名是否已經被注冊,如果已經被注冊,返回false,如果沒有被注冊,返回true。php服務端(laravel框架)是這樣寫的:
public function verifyName(Request $request)
{
$username = $request->input('name', '');
$user = User::where('name', $username)->first();
if ($username == $user->name) {
return json_encode(false);
}else{
return json_encode(true);
}
}
前端js代碼是這樣的:
<script>
$(function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$("#register").validate({
rules: {
name: {
required: true,
rangelength: [4, 30],
remote: {
url: "{{ url('services/validation/verify_name') }}",
type: "post"
}
}
},
errorClass: "has-danger",
validClass: "has-success",
//success: "valid",
highlight: function (element, errorClass) {
$(element).fadeOut(function () {
$(element).fadeIn();
});
$(element).closest(".form-group").addClass(errorClass);
},
unhighlight: function (element, errorClass) {
$(element).closest(".form-group").removeClass(errorClass);
},
errorPlacement: function (error, element) {
error.insertAfter(element);
}
});
});
</script>
問題:
當返回false的時候,可以正常返回,想返回true返回不了,出現Trying to get property of non-object,不知什么原因。
走同樣的路,發(fā)現不同的人生
<script>
$(function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$("#register").validate({
rules: {
name: {
required: true,
rangelength: [4, 30],
remote: {
url: "{{ url('services/validation/verify_name') }}",
type: "post",
data:{
name:function(){
return $("input[name='name']").val();
}
}
}
}
},
errorClass: "has-danger",
validClass: "has-success",
//success: "valid",
highlight: function (element, errorClass) {
$(element).fadeOut(function () {
$(element).fadeIn();
});
$(element).closest(".form-group").addClass(errorClass);
},
unhighlight: function (element, errorClass) {
$(element).closest(".form-group").removeClass(errorClass);
},
errorPlacement: function (error, element) {
error.insertAfter(element);
}
});
});
</script>
你前端代碼是不是忘了post數據到后臺?
data:{
name:function(){
return $("input[name='name']").val();
}
}