用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,不知什么原因。
<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();
}
}