2017-03-17 57 views
0

我正在寫一個文本框驗證,實際上不允許用戶輸入一些無效的特殊字符。一旦用戶輸入一個無效的特殊字符我舉辦了一個硬錯誤提示,我設置一個標誌:多個文本框輸入驗證檢查

$scope.charAllowedText = false; 

所以Next按鈕,將輸入框內有任何無效的價值得到禁止。只要用戶刪除無效字符,我只是將此標誌更改爲true。 我的解決方案對單個文本框工作正常,但這不適用於多個文本輸入。

在每個用戶的onClick我打電話此驗證:

$scope.validateUserInput = function(inputKey) { 
    var count = 0; 
    // inputKey = inputKey.replace(/[^a-zA-Z0-9 ]/g, ""); 
    $scope.imp = []; 
    $scope.imp = Array.from(inputKey.replace(/[a-zA-Z0-9\s]/g, '')); 
    var charInp = []; 

    $scope.missingItems = []; 
    $scope.imp.forEach(function(itemFromTarget) { 
    var itemFound = false; 
    for (var i in $rootScope.specialChar) { 
     if (itemFromTarget === $rootScope.specialChar[i].value) { 
     itemFound = true; 
     } 
    } 

    if (!itemFound) { 
     $scope.charAllowedText = false; 
     $scope.missingItems.push(itemFromTarget); 
    } 
    }); 

    if (($scope.charAllowedText == false)) { 
    $rootScope.charAllowedConfig = $scope.charAllowedText; 
    $scope.header_class = 'modal-error-header'; 
    $scope.cancel_bttn = { 
     txt: 'Ok', 
     class: 'btn-default' 
    }; 
    $scope.action_bttn = {}; 
    $modal({ 
     scope: $scope, 
     templateUrl: 'flexi-modal.html', 
     title: 'Error!', 
     content: '<p class="alert alert-danger">You have entered the ' + $scope.missingItems[0] + ' character which is not supported. Please reenter a different character.</p>', 
     html: true, 
     show: true, 
     animation: 'am-fade-and-scale', 
     placement: 'center' 
    }); 
    } 
}; 

對於特定的情況下,如果我仍然有無效字符我的下一個按鈕被自啓用的文本框和其他文本框一個刪除無效字符標誌值由第一個文本框設置爲true。

+0

添加一個蹲點爲了看看你的意思或給我們什麼傳遞和什麼不是通過 – geo

回答

1

編寫驗證檢查的正確方法應該是創建一個指令。原因是你想盡可能保持你的驗證器爲無狀態。您的解決方法的問題是您使用相同的變量,以檢查輸入是否有效。如果你想保持你的代碼相同的是改變功能及使用Angular-validator返回一個true或false,而不是值設置爲可變 $scope.charAllowedText

你可以做到這一點。

也看看這個post