How to restrict first character alphabet only for a given input field using angularjs?

Question

我有一个文本字段， <input type="text" placeholder="" class="form-control" ng-model="firstName">在该文本字段中，当用户尝试输入第一个字符时，第一个字符必须仅是字母不是字母不接受。

Answer 1

Generic regex check of first string character.

 var testString= "This is testString" console.log(testString+" - "+alphabeticalFirstChar(testString)); testString= "1This is testString" console.log(testString+" - "+alphabeticalFirstChar(testString)); testString= "This is testString0" console.log(testString+" - "+alphabeticalFirstChar(testString)); testString= "" console.log(testString+" - "+alphabeticalFirstChar(testString)); function alphabeticalFirstChar(str){ if(/^[Az]+$/.test(str[0]) && !str.length<1)//added check for str not being empty - returns true otherwise return true; else return false; } 

Answer 2

Try the following code:

 var myApp = angular.module('myApp', []); myApp.controller('myController', ['$scope', function($scope){ $scope.firstName = ""; var regex = /^[Az]+$/; $scope.$watch('firstName', function(newValue, oldValue){ if($scope.firstName.length > 0){ if(regex.test(newValue)){ $scope.firstName = oldValue; } } }); }]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="myController"> <input type="text" placeholder="" class="form-control" ng-model="firstName"> </div> 

Answer 3

 var myApp = angular.module('myApp', []); myApp.controller('controller', function($scope) { $scope.password; $scope.check = function () { if($scope.password != null){ var charArray = $scope.password.split(''); console.log(charArray); if(/[a-zA-Z\\_]$/.test(charArray[0]) && charArray[0] != null) { return true; } else { return false; } } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="controller"> <input type="password" ng-model="password" placeholder="Enter Password"/> <img src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-2/256/success-icon.png" ng-show="check()" width="25" height="25"/> <img src="https://dialectline.files.wordpress.com/2013/06/sign-error-icon.png" ng-show="!check()" width="25" height="25"/> </div> 

I hope it helps.

Answer 4

In Html

<input type="text" placeholder="" class="form-control" ng-model="firstName" ng-change="checkAlphabet()">

In Controller

$scope.checkAlphabet = function() {
    if($scope.firstName.substr(0, 1).match(/[A-Za-z]/) == null)
        $scope.firstName = $scope.firstName.substr(1);
}

Answer 5

Working example using $watch using regex as pointed by @Adam

Follow: https://jsfiddle.net/nirus/3Lytwybr/2/

Javascript:

function LoginController($scope) {
   $scope.user = {
      firstName: ""
   };
   $scope.$watch('user.firstName', function(){
        console.log("changed");
      var cache = $scope.user.firstName;
      if (!(/^[a-zA-Z]+$/.test($scope.user.firstName[0]))){         
        $scope.user.firstName = cache.slice(1,cache.length);
        console.log("here: "+ cache)
      }
   })
}

Html:

<div ng-app ng-controller="LoginController">
    <div>Hello {{ user.firstName }}</div>
    <input ng-model="user.firstName" />
</div>

Note : Avoid using too many watchers as it hampers the performance of the app.

Answer 6

I modified Adam K`s code and translated it into angular.

if(/^[A-z]+$/.test($scope.firstname[0]) == false) {
  $scope.firstname = ""; }

Hope it helped.