AngularJs自定义表单验证

    如何按照自己的需求来做好ng的表单验证,不多说直接上例子

<h1>自定义表单验证->限定只能输入偶数</h1>
<form name="myForm" ng-app="app" ng-controller="test">
    <div class="form-group">
        <div col-md-4>
            <label class="control-label">数字:</label>
        </div>
        <div col-md-8>
            <input type="number" name="test" ng-model="data.even" even/>
            <div ng-show="myForm.test.$error.even">必须是偶数</div>
        </div>
    </div>
</form>

  指令

 app.directive("even",function() {
            return{
                require: 'ngModel',//这个require,我简单的理解为继承的意思把。对应link函数中的第四个参数
                link:function(scope, element, attrs, ngModelController) {
                    ngModelController.$parsers.push(function (viewValue) {  //ngModel的双向绑定机制,
                        //$parser 这个服务是,从ViewModel->ModelView里面来。
                        if (viewValue % 2 === 0) {
                            ngModelController.$setValidity("even", true);
                        } else {
                            ngModelController.$setValidity("even", false);
                        }
                        return viewValue; //处理完之后,要把值返回
                    });
                }

        }
        });

        欢迎大家学习分享,谢谢

    

posted @ 2017-03-16 13:30  GDOUJKZZ  阅读(260)  评论(0编辑  收藏  举报