Question

我无法使用knockout.js设置自定义验证规则，以检查用户名是否已存在。根据我的理解，如果返回为真则没有错误，否则设置错误。

Here's自定义验证的一个例子

//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。这样，它比较searchType == searchType，它应该是true。但事实并非如此。

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

更新

这就是我现在所拥有的

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的方式，有两种类型的验证函数：直接返回真/假方式，或“异步”方式。

异步方式的存在只是因为$ .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，因为你写了它总是返回undefined。从回调函数内部调用“return”仅设置该回调函数的返回值（而不是“外部函数”）。如果验证器函数立即要求返回值（因为敲击似乎没有），您将无法异步获取该数据。

使用knockout.js的自定义验证规则

3 个答案: