angular表单验证

表单验证很简单，要三点需要做的：

1. 控制表单是否能提交
2. 显示验证提示信息
3. 自定义验证规则

第一点：控制表单是否可以提交

可以使用formName.$valid(有效为true)或formName.$invalid(无效为true)来控制提交按钮，formName为表单名称

例如

                    <form ng-submit="submit()" name="dataForm" novalidate>
                    <label class="item item-input">
                        <span class="input-label">产品编号</span>

                        <span class="input-label" ng-show="dataForm.barcode.$error.required">此项必填</span>
                        <span class="input-label" ng-show="dataForm.barcode.$error.minlength">长度不够</span>
                        <input type="text" name="barcode" ng-model="product.barcode" required ng-minlength="3">
                    </label>
                    <label class="item item-input">
                        <span class="input-label">产品名称</span>
                        <input type="text" ng-model="product.productName">
                    </label>
                    <button ng-disabled="!dataForm.$valid" class="button button-block button-positive" type="submit">
                        提交
                    </button>
                    </form>

第二点：显示验证提示信息

这个也很简单，只需给input元素加上验证规则，然后通过formName.inputName.patternName（表单名称.文本框名称.验证规则）就可以得出是否验证通过，再通过ng-show就可以控制提示信息的显示和隐藏，有多少提示规则就写多少，angular会根据你的验证规则的顺序依次判断和显示。

第三点：自定义验证规则

var INTEGER_REGEXP = /^\-?\d*$/;
app.directive('integer', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$parsers.unshift(function(viewValue) {
        if (INTEGER_REGEXP.test(viewValue)) {
          // 如果是验证通过的，就返回输入的值给模型
          ctrl.$setValidity('integer', true);
          return viewValue;
        } else {
          // 如果验证不通过，就返回undefined，不返回值给模型
          ctrl.$setValidity('integer', false);
          return undefined;
        }
      });
    }
  };
});

使用以上代码就行了，这个不需要解释把。