码迷,mamicode.com
首页 > 其他好文 > 详细

简单的angular表单验证指令

时间:2016-04-23 11:46:04      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:

<html ng-app="myApp">

<head>
  <meta charset="UTF-8">
  <title>test表单验证</title>
  <script type="text/javascript" src="lib/angular/angular.js"></script>
  <script type="text/javascript">
  var app = angular.module(myApp, []);
  app.controller(testCtrl, function($scope) {
    var _test = function() {
      $scope.canSubmit = false;
      console.log(a);
    };

    var init = function() {
      $scope.model = {
        name: happen
      };
      $scope.canSubmit = true;
      $scope.test = _test;
    };
    init();
  });
  app.directive(testValid, function() {
    return {
      restrict: A,
      require: ngModel,
      link: function(scope, elem, attrs, ctrl) {
        var init = function() {
          elem.on(blur, function() {
            scope.$apply(function() {
              if (elem.val() === happen) {
                ctrl.$setValidity(isHappen, false);
              } else {
                ctrl.$setValidity(isHappen, true);
              }

            });

          });
        };
        init();
      }
    }
  });
  </script>
</head>

<body>
  <form name="myForm">
    <div ng-controller="testCtrl">
      <input type="text" name="test" ng-model="model.name" test-valid required>
      <p ng-show="myForm.test.$error.isHappen">名字是默认值</p>
      <p ng-show="myForm.test.$error.required">名字必填项</p>
      <button ng-disabled="myForm.$invalid || !canSubmit" ng-click="test();" style="width: 200px;height: 20px;"></button>
    </div>
  </form>
</body>

</html>

 

简单的angular表单验证指令

标签:

原文地址:http://www.cnblogs.com/happen-/p/5424209.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!