使用AngularJS驗證輸入

Question

我有一些我想要驗證的input字段。對於「電子郵件」輸入，我已經完成了。對於「手機」輸入，我編寫了一些防止用戶插入字符的代碼，但它不起作用。對於「密碼」輸入，用戶必須輸入至少8個字符，包括數字。我需要如果用戶插入一個錯誤的值，輸入邊框變成紅色。

我應該怎麼做？這是我在jsfiddle.net

代碼代碼：

app.directive('phoneNumber', function() { 
    return { 
    require: 'ngModel', 
    link: function (scope, element, attr, ngModelCtrl) { 
     function fromUser(text) { 
     var transformedInput = text.replace(/[^0-9]/g, ''); 
     console.log(transformedInput); 
     if(transformedInput !== text) { 
      ngModelCtrl.$setViewValue(transformedInput); 
      ngModelCtrl.$render(); 
     } 
     return transformedInput; 
     } 
     ngModelCtrl.$parsers.push(fromUser); 
    } 
    }; 
}); 

是對「手機」輸入到防止用戶插入字符的代碼。

問候

Answer 1

這是回答我的問題的鏈接：CodeProject

在我jsfiddle.net

一些變化爲「******中國」的代碼是：

$('#PhoneNumber').bind('keypress', function(e){ 
     if(e.which != 8) { 
     if ((e.which < 48) || (e.which > 57)) { 
      e.preventDefault(); } 
     } 
     }); 

的e.which != 8是用於接受退格鍵。

感謝大家

Answer 2

這是你想要做什麼，在我的例子中，如果用戶鍵入字符 ' - ' 輸入錯誤被發現^^

$('input[type="text"]').keyup(function() { 
 
    if($('input[type="text"]').val().indexOf("-") != -1){ 
 
    $(this).css('border-color', 'red'); 
 
} 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="text"><br>

編輯：

這樣，你將刪除錯誤的字符

$('input[type="text"]').keyup(function() { 
 
    if($('input[type="text"]').val().indexOf("-") != -1){ 
 
    $(this).css('border-color', 'red'); 
 
    $('input[type="text"]').val($('input[type="text"]').val().replace('-','')); 
 
} 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="text"><br>

編輯：

這樣，您將被禁字符

bannedChars = ['a','b','c','d']; 
 

 
$('input[type="text"]').keyup(function() { 
 
    
 
    if(bannedChars.indexOf($('input[type="text"]').val().substring($('input[type="text"]').val().length-1)) != -1){ 
 
    $(this).css('border-color', 'red'); 
 
    $('input[type="text"]').val($('input[type="text"]').val().substring(0,$('input[type="text"]').val().length-1)); 
 
} 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="text"><br>

的數組中刪除了錯誤的字符0

Answer 3

我已更新您的代碼。請檢查下面的代碼片段。

我還測試了您的手機號碼數字正則表達式，它工作正常。 （您可以測試你的正則表達式here，或與任何其他在線的正則表達式工具。）

var app = angular.module("myApp",[]); 
 
    app.controller("myCtrl", function($scope){ 
 
    
 
    $scope.passwordVal = /^[a-zA-Z1-9 ]{8,}$/; // Password Pattern 
 
    });

input { 
 
    padding: 8px 20px; 
 
    margin: 8px 5px; 
 
    box-sizing: border-box; 
 
    border: 1px solid; 
 
    border-radius: 4px; 
 
} 
 
input.invalid { 
 
    border-color:red !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
<form name="myForm" > 
 
    
 
    Phone: <input type="text" name="my_phone" placeholder="Enter Your Phone" ng-model="phone" ng-pattern="/^.{11}$/" style="margin:8px 28px;" 
 
    ng-class="{'invalid': myForm.my_phone.$error.pattern }" ><br> 
 
    
 
    Password: <input type="password" placeholder="Enter Your Password" name="my_password" ng-class="{'invalid': myForm.my_password.$error.pattern }" ng-model = "password" ng-pattern="{{passwordVal}}"> 
 
    </form></div>

OR

你可以做到這一點其他方式使用NG-圖案 - 限制指令。

獲取從here庫中，你需要輸入添加ng-pattern-restrict如下圖所示：

<input type="text" name="my_phone" placeholder="Enter Your Phone" ng-model="phone" ng-pattern="/^.{11}$/" style="margin:8px 28px;" 
     ng-class="{'invalid': myForm.my_phone.$error.pattern }" ng-pattern-restrict > 

GitHub上：AlphaGit/ng-pattern-restrict