使用基因敲除的自定义验证规则

Question

我在使用基因敲除（Knockout.js）获取自定义验证规则设置以检查用户名是否已存在时遇到麻烦。 根据我的理解，如果返回值为true，则没有错误，否则将设置错误。

这是自定义验证的示例

//val is the username in question and searchType is the type of search(username or email)
function checkValue(val, searchType){
  if(searchType == 'userName'){
    $.post("/users/check_if_exists",{ 'type':'username', 'value': val },function(data) {
        var info = JSON.parse(data);
        if(info.username_availability == "available"){
            return searchType;
                            //I know this is working because I've alerted the searchtype here and it displays properly
        }
        else{
            return "unavailable";
        }
    });
  }
} 

ko.validation.rules['checkIfExists'] = {
    validator: function (val, searchType) {
        return searchType == checkValue(val, searchType); //if the username is availble, the searchType is returned back so it would return searchType == searchType which should be true meaning there are no errors
    },
    message: 'This username is taken, please select another.'
};
ko.validation.registerExtenders();

我已经检查了网络标签，并且POST返回了正确的值。 如果该值可用，则返回searchType。 这样，它将比较应该为true的searchType == searchType。 但是，事实并非如此。

还有其他方法可以完成我想做的事情吗？

更新

这是我到目前为止的

function checkValue(val, searchType, callback) {
     var callback = function(data) {
        return true;
    }
    $.post("/users/check_if_exists", { 'type':'username', 'value': val }, function(data) {
        info = JSON.parse(data);
        if(info.username_availability == "available"){
            callback(true);
        } else {
            callback(false);
        }
    }); 
}

ko.validation.rules['checkIfExists'] = {
    async: true,
    validator: function (val, searchType) {
        alert(checkValue(val, searchType));//returns undefined
        return checkValue(val, searchType);
    },
    message: 'This username is taken, please select another.'
};
ko.validation.registerExtenders();

Answer 1

ko.validation调用您的验证功能。 关于将成功/失败状态传递回ko.validation的方式，有两种类型的验证功能：直接返回true / false方式或“异步”方式。

异步方式仅存在是因为$ .ajax存在，并且基本上就是这样：代替返回值（这是不可能的，因为您正在使用$ .ajax调用），您必须以某种方式在ajax响应返回后通知ko.validation。浏览器，对吗？

因此，编写此库的聪明人用一个额外的参数调用您的验证函数，即一个函数（回调），当响应可用时，您必须调用该函数。

function checkValue(val, searchType, callback){
  if(searchType == 'userName'){
    $.post("/users/check_if_exists",{ 'type':'username', 'value': val },function(data) {
        var info = JSON.parse(data);
        if(info.username_availability == "available"){
            callback(true);
                            //I know this is working because I've alerted the searchtype here and it displays properly
        }
        else{
            callback(false);
        }
    });
  }
} 


ko.validation.rules['checkIfExists'] = {
    async: true,
    validator: checkValue,
    message: 'This username is taken, please select another.'
};
ko.validation.registerExtenders();

Answer 2

让我将您的代码变成更具可读性的内容：

function checkValue(val) {
    var callback = function(data) {
        return 'bar';
    }

    $.post('url', 'data', callback); 
}

var x = checkValue('foo');

您不希望将x设置为“ bar”。 我将您的匿名函数替换为“回调”，因此您可以更好地理解从中返回某些内容并不意味着“ checkValue”将返回任何内容。 之后，您的下一个问题是AJAX调用是异步的。

验证器函数接受三个参数：值，附加参数和回调函数。 回调函数参数旨在帮助您完全解决这种情况。

在$ .post的成功回调中，您只需为传递true / false作为参数的验证器函数调用该回调函数。

function checkValue(val, params, callback) {
    $.post('url', 'data', function(data) {
        if(data === 'bar') {
            callback(true);
        } else {
            callback(false);
        }
    }); 
}

Answer 3

您编写的checkValue始终返回未定义。 从回调函数内部调用“ return”仅设置该回调函数的返回值（而不是“外部函数”）。 如果验证器函数立即期望返回值（就像敲除一样），您将无法异步获取该数据。