1

只是我正在使用 JQuery 验证来验证这个简单的表单 

<form id="getting-started-form">
<label>Name</label>
<input type="text" id="txt-name" name="name" />

<br />
<label>Email</label>
<input type="text" id="txt-email" name="email" />

<button type="submit">Validate</button>
</form>

如果此表单未包含在 ng 视图中，则验证工作正常，但是当我使用 ng 路由检索此模板时，验证不适用于相同的表单。

这是我的简单 HTML 页面

<!DOCTYPE html>
<html data-ng-app="ngViewValidate">
<head>
<title></title>
</head>
<body>

<div data-ng-view="">
</div>

<br />
<a href="#/ValidationTmpl">Go to validation template </a>
</body>
<script src="../Scripts/angularjs.js"></script>
<script src="../Scripts/angular-route.js"></script>
<script src="../Scripts/jquery-2.0.2.js"></script>
<script src="../Scripts/jquery.validate.js"></script>
<script src="../Scripts/jquery.validate.unobtrusive.js"></script>
<script src="JQueryValidateWithNgView.js"></script>
</html>

这是我的 java 脚本文件 JqueryValidateWithNgView

var ngViewValidate = angular.module('ngViewValidate', ['ngRoute']);

ngViewValidate.config(function ($routeProvider , $locationProvider) {

$routeProvider.when('/ValidationTmpl',
    {
        templateUrl: '/WithAngular/ValidationTmpl.html'
    })
})

$('#getting-started-form').validate({

rules: {
    name: {
        required: true
    },
    email: {
        required: true
    }
},
submitHandler: function (form) {
    console.log('Valid');
},
invalidHandler: function (event, validator) {
    console.log('InValid');
}
})

问题是我可以使用任何解决方法在 ng 视图中使用 JQuery 验证和模板，还是应该使用角度验证？

4

3 回答 3

2

我在 AngularJS 和 jQuery Validation Plugin 之间架起了一座桥梁。它使用单个指令验证表单ng-validate，该指令会自动检测 DOM 何时准备就绪。它还使您能够在控制器中定义验证选项（规则、消息等），因此您不必为每个表单创建新指令。

试一试：https ://github.com/jpkleemans/angular-validate 。非常感谢您的反馈！

于 2015-05-20T07:49:24.780 回答
1

将其移动到指令中，例如将其放在表单上。

HTML：

<form id="getting-started-form" j-validate>

JS：

ngViewValidate.directive('jValidate', function() {

  return {
    link: function(scope, element, attr) {

      element.validate({

        rules: {
          name: {
            required: true
          },
          email: {
            required: true
          }
        },
        submitHandler: function(form) {
          console.log('Valid');
        },
        invalidHandler: function(event, validator) {
          console.log('InValid');
        }
      });

      scope.$on('$destroy', function () {
        // Perform cleanup.
        // (Not familiar with the plugin so don't know what should to be done)
      });
    }
  }
});

演示： http ://plnkr.co/edit/cjQH7dl3vHGzgaA9OHOy?p=preview

根据您要放入指令中的逻辑，例如，如果您需要额外的 jQuery 插件来在绑定之前修改表单，您可以$timeout立即使用（有点简化）将操作放在浏览器事件的末尾在渲染引擎之后排队：

ngViewValidate.directive('jValidate', function($timeout) {

  return {
    link: function(scope, element, attr) {

      $timeout(function () {

        element.validate({

          ...

        });
      });

      scope.$on('$destroy', function() {

        ...

      });
    }
  }
});

或者，您可以$evalAsync在 Angular 操作 DOM 之后（例如通过其他指令）但在浏览器呈现它之前使用来执行逻辑：

ngViewValidate.directive('jValidate', function() {

  return {
    link: function(scope, element, attr) {

      scope.$evalAsync(function () {

        element.validate({

          ...

        });
      });

      scope.$on('$destroy', function() {

        ...

      });
    }
  }
});
于 2014-05-17T06:29:27.980 回答
0

让 tis 工作的最简单方法是

   $scope.$on('$viewContentLoaded', function (event) {


            var currentForm = $('#frmCreateForm');
            currentForm.removeData("validator");
            currentForm.removeData("unobtrusiveValidation");
            $.validator.unobtrusive.parse(currentForm);
            //currForm.validate();
            var validator = currentForm.validate();  
});
于 2015-06-05T11:46:56.997 回答