这是JavaScript:
function checkusername()
{
var username = $("#username").val();
$.post("usernamecheck.php", {'username':username},
function (data){
if(data == 'taken'){
alert('taken');
return false;
}else{
alert('available');
return true;
}
}
);
}
/**
* @author GeekTantra
* @date 20 September 2009
*/
(function(jQuery){
var ValidationErrors = new Array();
jQuery.fn.validate = function(options){
options = jQuery.extend({
expression: "return true;",
message: "",
error_class: "ValidationErrors",
error_field_class: "ErrorField",
success_field_class: "SuccessField",
live: true
}, options);
var SelfID = jQuery(this).attr("id");
var unix_time = new Date();
unix_time = parseInt(unix_time.getTime() / 1000);
if (!jQuery(this).parents('form:first').attr("id")) {
jQuery(this).parents('form:first').attr("id", "Form_" + unix_time);
}
var FormID = jQuery(this).parents('form:first').attr("id");
if (!((typeof(ValidationErrors[FormID]) == 'object') && (ValidationErrors[FormID] instanceof Array))) {
ValidationErrors[FormID] = new Array();
}
if (options['live']) {
if (jQuery(this).find('input').length > 0) {
jQuery(this).find('input').bind('blur', function(){
if (validate_field("#" + SelfID, options)) {
if (options.callback_success)
options.callback_success(this);
}
else {
if (options.callback_failure)
options.callback_failure(this);
}
});
jQuery(this).find('input').bind('focus keypress click', function(){
jQuery("#" + SelfID).next('.' + options['error_class']).remove();
jQuery("#" + SelfID).removeClass(options['error_field_class']);
});
}
else {
jQuery(this).bind('blur', function(){
validate_field(this);
});
jQuery(this).bind('focus keypress', function(){
jQuery(this).next('.' + options['error_class']).fadeOut("fast", function(){
jQuery(this).remove();
});
jQuery(this).removeClass(options['error_field_class']);
});
}
}
jQuery(this).parents("form").submit(function(){
if (validate_field('#' + SelfID))
return true;
else
return false;
});
function validate_field(id){
var self = jQuery(id).attr("id");
var expression = 'function Validate(){' + options['expression'].replace(/VAL/g, 'jQuery(\'#' + self + '\').val()') + '} Validate()';
var validation_state = eval(expression);
if (!validation_state) {
if (jQuery(id).next('.' + options['error_class']).length == 0) {
jQuery(id).after('<span class="' + options['error_class'] + '">' + options['message'] + '</span>');
jQuery(id).addClass(options['error_field_class']);
}
if (ValidationErrors[FormID].join("|").search(id) == -1)
ValidationErrors[FormID].push(id);
return false;
}
else {
for (var i = 0; i < ValidationErrors[FormID].length; i++) {
if (ValidationErrors[FormID][i] == id)
ValidationErrors[FormID].splice(i, 1);
}
jQuery(id).addClass(options['success_field_class']);
return true;
}
}
};
jQuery.fn.validated = function(callback){
jQuery(this).each(function(){
if (this.tagName == "FORM") {
jQuery(this).submit(function(){
if (ValidationErrors[jQuery(this).attr("id")].length == 0)
callback();
return false;
});
}
});
};
})(jQuery);
这是usernamecheck.php:
<?php
$username = $_POST['username'];
if($username == 'asdf'){
echo "taken";
}else{
echo "available";
}
?>
这是register.php的相关部分:
<script type="text/javascript">
jQuery(function(){
jQuery("#username").validate({
expression: "if (VAL.length > 2 && VAL.length < 13 && VAL && checkusername()) return true; else return false;",
message: "Please enter a valid username between 3 and 12 characters long. If you have that username is taken.",
});
实际的验证工作正常,如果我输入asdfg,我会得到一个消息框,说“可用”,如果我输入asdf,我会得到一个消息框,说“已采取”。但是,jQuery仍会显示该消息。
最佳答案
问题是checkusername()
实际不返回true或false。您添加到$.post()
的回调函数可以,但是不会是checkusername()
的返回值。实际上,checkusername()
将立即返回,而无需等待您的发布请求的结果,因为这就是回调函数的作用。
编辑:
一种解决方案是,如果您的回调验证失败,则显示弹出消息。
一个快速的谷歌可以给你一些examples。