如何使用angularjs限制给定输入字段的第一个字符字母?

时间:2017-03-08 07:28:05

标签: javascript angularjs

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

6 个答案:

答案 0 :(得分:3)

第一个字符串字符的通用正则表达式检查。

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(/^[A-z]+$/.test(str[0]) && !str.length<1)//added check for str not being empty - returns true otherwise
      return true;
   else
      return false;
}

答案 1 :(得分:2)

请尝试以下代码:

&#13;
&#13;
var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', function($scope){
  $scope.firstName = "";
  var regex = /^[A-z]+$/;
  $scope.$watch('firstName', function(newValue, oldValue){
      if($scope.firstName.length > 0){
          if(regex.test(newValue)){
              $scope.firstName = oldValue;
          }
      }
  });      
}]);
&#13;
<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>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

&#13;
&#13;
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;
			}
		}
	}
});
&#13;
<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>
&#13;
&#13;
&#13;

我希望它有所帮助。

答案 3 :(得分:1)

在Html中

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

在控制器

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

答案 4 :(得分:0)

@Adam 指出使用正则表达式$watch的工作示例

关注: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>
  

注意:避免使用太多观察者,因为它会妨碍应用的效果。

答案 5 :(得分:0)

我修改了Adam K的代码并将其翻译成了角色。

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

希望它有所帮助。