我面临以下问题。在注册表单中,如果已经使用了给定的用户名,它会尝试远程检查。 这很好用,如果用户名已被使用,我添加错误类工作正常。 问题是,即使用户名已被使用,您仍然可以提交注册表单。远程验证不应该阻止吗?
这是我的验证码。
var validator = $('#register').validate({
rules: {
registerUsername: {
required: true,
remote: {
type: 'post',
url: 'includes/CheckUsername',
data: {
username: function() {
return $('#registerUsername').val()
}
},
complete: function(data){
if( data.responseText != "found" ) {
$('#regUsernameGroup').addClass('has-error').removeClass('has-success');
return false;
}
else{
$('#regUsernameGroup').removeClass('has-error').addClass('has-success');
}
}
}
},
registerEmail: {
required: true
},
registerPassword: {
required: true
}
},
messages: {
registerUsername: {remote: 'tzuwertzut',required: 'asdasd'},
registerEmail: "",
registerPassword: ""
},
highlight: function(element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
}
});
$('#myModal').on('hidden.bs.modal', function () {
validator.resetForm();
$('#regEmailGroup').removeClass('has-error').removeClass('has-success');
$('#regUsernameGroup').removeClass('has-error').removeClass('has-success');
$('#regPassGroup').removeClass('has-error').removeClass('has-success');
});
任何提示都将不胜感激。
答案 0 :(得分:1)
参考the documentation for the remote
method:
选项强>:
这些选项深度扩展默认值(dataType:"json", data:{nameOfTheElement:valueOfTheElement}
)。 您提供的任何选项都将覆盖默认值。
和...
响应评估为JSON,必须为
true
有效元素, 并且可以是任何false
,undefined
或null
无效元素,使用 默认消息;或者一个字符串,例如。 “这个名字已经被拿走了,试试吧 peter123而不是“显示为错误消息。
(上面的“响应”一词是指服务器端代码的响应)
现在让我们检查您的代码:
remote: {
type: 'post',
url: 'includes/CheckUsername',
data: {
username: function () {
return $('#registerUsername').val()
}
},
complete: function (data) {
if (data.responseText != "found") {
$('#regUsernameGroup').addClass('has-error').removeClass('has-success');
return false;
} else {
$('#regUsernameGroup').removeClass('has-error').addClass('has-success');
}
}
}
关于data:
data: {
username: function () {
return $('#registerUsername').val()
}
}
根据上面引用的文档,data
选项的默认值已经是nameOfTheElement: valueOfTheElement
,因此您根本不需要在此处覆盖它。您的语法没有任何问题,但只有当您还必须从其他字段发送数据以及remote
定位的字段中的数据时,才需要此选项; 示例 - 您正在使用remote
检查用户名字段,但您需要发送电子邮件地址字段。
关于complete:
complete: function (data) {
if (data.responseText != "found") {
$('#regUsernameGroup').addClass('has-error').removeClass('has-success');
return false;
} else {
$('#regUsernameGroup').removeClass('has-error').addClass('has-success');
}
}
您无需指定.addClass('has-error').removeClass('has-success')
和.removeClass('has-error').addClass('has-success')
。当remote
规则接收通过/失败状态时,正确地自动发生类的正确应用。
您的逻辑正在尝试确定响应是否与"found"
匹配。如果没有,则返回false
。如果是(匹配"found"
),那么您希望它通过验证。但是,根据文档,如果服务器返回一个字符串,则认为它具有“失败”验证,并且该字符串将成为错误消息。我相信您的return false
行只是完全禁用remote
规则,这就是您能够提交表单的原因。
基本上,您无需手动检查响应是否与任何内容匹配。同样,远程规则只是在验证通过时查找服务器端响应为true
,或者false
,undefined
,null
或者如果验证失败则为字符串。然后,所有内容都由 自动 处理,包括错误类。
只要您的服务器端代码构造正确以返回所需的响应,您的remote
规则只需要看起来像这样......
remote: {
type: 'post',
url: 'includes/CheckUsername'
}