显示错误是用户在文本框中输入特殊字符 Angular Js

Question

我是 AngularJs 的新手。我有一个输入字段，如果用户在文本框中输入特殊字符，我想显示红线错误并限制用户。

这是我的Html

<input data-toggle="password" class="form-control" data-placement="after" type="password"
                           placeholder="User Name"
                           ng-model="obj.username" maxlength="16" style="text-transform: lowercase"/>

我想限制用户并显示错误“不允许使用特殊字符，请尝试另一个”并限制用户。我如何在 Controller 中处理此问题

Answer 1

我有两种可能的解决方案：

只需使用 HTML 输入模式属性，通过这种方式，您可以通过本机 HTML 验证来禁止提交任何您想要的内容。

<form>
  <input type="text" pattern="^[a-zA-Z0-9]+$" />
  <button>Submit</button>
</form>

使用 angular 创建一个方法，在每次更改事件时验证输入。

var myApp = angular.module('myApp',[]);

myApp.controller('myController', ['$scope', function($scope) {
      $scope.input = "";
      $scope.error = false;
      
      // Validation function, that sets error=true, if special chars in input.
      $scope.validForm = function() {
        var regex = new RegExp("^[a-zA-Z0-9]+$");
        if (!regex.test($scope.input)) {
            $scope.error = true;
            console.log("true");
        } else {
            $scope.error = false;
           console.log("false");
        }
      }
      
      // Validation on each input change
      $scope.change = function() {
        $scope.validForm();
      };
      
      // Initial validation
      $scope.validForm();
}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="myApp">
  <form ng-controller="myController">
  
    <!-- Input with change function that triggers validation -->
    <input type="text" ng-model="input" ng-change="change()">

    <!-- Error message shown if validation has errors -->
    <div ng-show="error">
      Error! Please fill and don't use special chars!
    </div>

    <!-- Disabled submit if validation has errors -->
    <div>
      <button ng-disabled="error">Submit</button>
    </div>
  </form>
</div>

显示错误是用户在文本框中输入特殊字符 Angular Js

Show Error is User Enter Special Character in Textbox Angular Js

javascript

angularjs