1

我想向我的用户展示两种类型的验证：

  1. 当他们在输入字段中输入时，如果当前值无效，我希望在输入旁边显示一个友好的灰色/黑色提示框
  2. 然后，当他们模糊输入时，如果输入的值仍然无效，我想将提示的样式更改为更传统的红色提示。当他们回到输入来修复它时，我想回到 #1 中的友好提示。

我想重用提示框以减少混乱（这意味着我不想要div提示的友好版本和div完全相同的验证失败的传统版本），我想使用 Angular 的验证标记（ng-maxlength,ng-pattern等）让我以有用的方式响应用户的输入，例如如果他们在“年龄”输入中输入文本时说“仅数字”，或者如果他们在输入中说“那个值太高”尝试将“1000”作为年龄。

我有一个工作示例（排序），但我觉得可能有更好的方法来做到这一点，（也许使用指令？）但如果没有别的，我不明白为什么我当前的解决方案失败了。我想我只是在 jquery 选择器中遗漏了一些东西，但任何帮助都会很棒。

具体来说，当用户在输入中键入时，友好提示的样式不正确。简单的jquery修复？关于更简洁的解决方案的任何想法？提前致谢。

plunkr

html:

    <body ng-controller="MyCtrl">
    <label class="control-label">Number of Dependents:</label>
    <form name="demographicsform">
      <div ng-class="{true: 'control-group error', false: 'control-group'}[demographicsform.dependents.$invalid]">
        <input type="text"
                class="mini-input control"
                id="dependents"
                name="dependents"
                ng-model="demographicsHolder.dependents"
                ng-pattern="/^([1-9][0-9]?|)$/"
                ng-change="change('dependentsValidation')"
                maxlength="2"
                required />

        <!-- This error should fire when the input is the wrong type (text/number/etc) or format-->
        <div class="validation-err help-inline error"
              name="dependentsValidationPattern"
              ng-show="demographicsform.dependents.$error.pattern">
          A 2 digit number is required
        </div>
        <!-- This error should fire when the input is empty -->
        <div class="validation-err help-inline error"
              name="dependentsValidationRequired"
              ng-show="demographicsform.dependents.$error.required">
            Required field
        </div>
      </div>
    </form>        
    </body>

控制器：

var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {

  $scope.demographicsHolder = {name:"bob",dependents:1};

  $scope.change = function(validationDivs) {
    $( validationDivs ).removeClass( ".validation-err" );
    $( validationDivs ).addClass( ".validation-hint" );

    $( "#" + elemId ).blur(function() {
      $( "#" + elemId ).removeClass( ".validation-hint" );
      $( "#" + elemId ).addClass( ".validation-err" );
    });
  };
});

CSS：

  .validation-hint {
      background-color: #0e0e0e;
  }

  .validation-err {
    background-color: #ffe5e5;
  }

验证按我的意愿工作，但我希望在用户实际在框中输入时显示提示并根据需要设置样式。

4

1 回答 1

2

首先恭喜！您的工作示例非常接近您想要的。我同意你的观点，指令是解决这个问题的最好方法，因为 AngularJS 中的所有 DOM 操作都应该使用指令来完成。

我做了一个指令来解决你的问题，在这里看看。

该指令的参考代码：

html

<!-- directive: hint-box -->
<hint-box observe="id-to-observe"
          ng-show="validation-regexp">
          Hint box text
</hint-box>

JS

app.directive('hintBox', function($compile) {
  return {
    restrict: 'E',
    template: '<div class="validation-hint help-inline error"' +
              'name="dependentsValidationPattern"' +
              'ng-transclude>' +
              '</div>',
    replace: true,
    transclude: true,,
    link: function($scope, elem, attr, ctrl) {
      var observedElem = $('#' + attr['observe']);

      // The blur event is sent to an element when it loses focus.
      // http://api.jquery.com/blur/
      observedElem.bind('blur', function (e) {
        elem.removeClass( "validation-hint" );
        elem.addClass( "validation-err" );
      });

      // The focus event is sent to an element when it gains focus.
      // http://api.jquery.com/focus/
      observedElem.bind('focus', function (e) {
        elem.removeClass( "validation-err" );
        elem.addClass( "validation-hint" );
      });
    }
  };
});
于 2013-09-27T20:44:26.533 回答