Question

例如假设我有三个字段，如下面

名字 - 最少5个字符

姓氏 - 最少5个字符

电话号码 - 必须为数字

用户位于第一个字段（名字），如果他按Tab而不输入任何值，则不应移至第二个字段但应显示错误名字应至少为5个字符。

用户也无法通过单击鼠标输入到下一个字段

任何人都可以帮助在angularjs

中实现这一目标

Answer 1

你必须写一个指令来做到这一点：

var app = angular.module('myApp', []);

app.directive('minLen', function() {
  // Linker function
  return function(scope, element, attrs) {
    element.bind('keydown', function(e) {
      var keyCode = e.keyCode || e.which;
      console.log(this.id);
      if (keyCode == 9) {
        if (this.value.length < 5) {
          console.log(keyCode);
          $('.' + this.id + 'Error').show();
          e.preventDefault();

        } else {
          $('.' + this.id + 'Error').hide();
        }
      }
    });
  };
});

<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">


  <div>
    Name:
    <input id="name" type="text" min-len="5" />
    <span class="nameError" style="color:red; display:none">Name should at least be 5 char long</span>
  </div>

  <div>
    Last name:
    <input id=last type="text" min-len="5" />
    <span class="lastError" style="color:red; display:none">Last name should at least be 5 char long</span>
  </div>

  <div>
      Phone: <input type="number" />
  </div>

</div>

对于电话号码，请使用type="number"。

Answer 2

这是一个很好的解决方案Yaser。但您可以添加焦点事件以实现完整的要求。此焦点事件不允许您在填充之前跳转到任何其他输入字段。

var app = angular.module('myApp', []);

app.directive('minLen', function() {
  // Linker function
  return function(scope, element, attrs) {
    element.bind('focusout', function(e) {
      console.log(this.id);
        if (this.value.length < 5) {
          console.log(keyCode);
          $('.' + this.id + 'Error').show();
          e.preventDefault();
          this.focus();

        } else {
          $('.' + this.id + 'Error').hide();
        }

    });
  };
});

<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">


  <div>
    Name:
    <input id="name" type="text" min-len="5" />
    <span class="nameError" style="color:red; display:none">Name should at least be 5 char long</span>
  </div>

  <div>
    Last name:
    <input id=last type="text" min-len="5" />
    <span class="lastError" style="color:red; display:none">Last name should at least be 5 char long</span>
  </div>

  <div>
      Phone: <input type="number" />
  </div>

</div>

仅在当前输入有效后才允许通过选项卡进入下一个字段

2 个答案: