Question

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

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

我想重复使用提示框来减少混乱（这意味着我不希望div用于友好版本的提示，而div用于传统版本的完全相同的验证失败），我想使用angular的验证标记（ng-maxlength，ng-pattern等）让我以有用的方式回应用户的输入，比如说“仅限数字” “如果他们在”年龄“输入中输入文本，或者”如果他们试图将“1000”作为年龄，则“该值太高”。

我有一个工作示例（sortof），但我觉得可能有更好的方法来做到这一点，（也许使用指令？）但如果没有别的，我不明白为什么我当前的解决方案失败了。我想我只是在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;
  }

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

Answer 1

首先祝贺！你的工作实例非常接近你想要的。我同意你的意见，指令是解决这个问题的最佳方法，因为AngularJS中的所有DOM操作都应该用指令完成。

我用一个解决你问题的指令制作了一个plunker，看看它here。

该指令的参考代码：

<强> 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" );
      });
    }
  };
});

如何使用ng-show，ng-change，＆amp; ng-class到样式验证提示/错误

1 个答案: