knockout.js를 사용한 사용자 정의 유효성 검사 규칙

Question

사용자 이름이 이미 있는지 확인하기 위해 knockout.js를 사용하여 사용자 정의 유효성 검사 설정을 얻는 데 문제가 있습니다. 내 이해에서 반환이 true이면 오류가 없으며 그렇지 않으면 오류가 설정됩니다.

Here's 내가 네트워크 탭을 확인했고 POST가 올바른 값을 반환

//val is the username in question and searchType is the type of search(username or email) 
function checkValue(val, searchType){ 
    if(searchType == 'userName'){ 
    $.post("https://stackoverflow.com/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(); 

지정 유효성 검사의 예. 값을 사용할 수 있으면 searchType을 반환합니다. 이렇게하면 true이어야하는 searchType == searchType을 비교합니다. 그러나 그 경우는 아닙니다.

내가하려는 일을 수행하는 다른 방법이 있습니까?

갱신

여기에 당신이 항상 정의되지 않은 반환 작성한으로 지금

function checkValue(val, searchType, callback) { 
    var callback = function(data) { 
     return true; 
    } 
    $.post("https://stackoverflow.com/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 또는 "async"방식입니다.

비동기 방식은 $ .ajax가 있고 기본적으로 다음과 같습니다. $ .ajax 호출을 사용하는 것처럼 불가능한 값을 반환하는 대신 기본적으로 다음과 같이 ko.validation을 알립니다. Ajax 응답이 브라우저로 돌아옵니다.

그래서이 라이브러리를 작성한 현명한 사람들은 응답이 가능할 때 호출해야하는 함수 (콜백)와 함께 유효성 검사 함수를 호출합니다.

function checkValue(val, searchType, callback){ 
    if(searchType == 'userName'){ 
    $.post("https://stackoverflow.com/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

checkValue의로있는거야. 콜백 함수의 내부에서 "return"을 호출하면 해당 콜백 함수의 반환 값만 설정됩니다 ("외부 함수"가 아님). 유효성 검사기 함수가 반환 값을 즉시 예상하면 (녹아웃이 나타나는 것처럼) 데이터를 비동기 적으로 가져올 수 없습니다.

Answer 3

나를 더 읽기 무언가로 코드를 살펴 보자 : 그런 경우가 아닌 경우

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

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

var x = checkValue('foo'); 

당신은 X를 기대하고이 '바'로 설정되어야한다. 익명 함수를 "콜백"으로 바꿨으므로 뭔가를 반환해도 "checkValue"가 아무 것도 반환하지 않는다는 것을 더 잘 이해할 수 있습니다. 그 다음 문제는 AJAX 호출이 비동기라는 사실입니다.

유효성 검사기 기능은 값, 추가 매개 변수 및 콜백 함수의 세 가지 매개 변수를 허용합니다. 콜백 함수 매개 변수는이 상황에서 당신을 돕기 위해 만들어졌습니다.

$ .post에 대한 성공 콜백 내에서 true/false를 매개 변수로 전달하는 유효성 검사기 함수에 대해 해당 콜백 함수를 호출하면됩니다.

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