<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=" 200px;height: 20px;"></button> </div> </form> </body> </html>