5

我正在使用 angular js 进行解析验证，但它不起作用我做错了什么，任何人都可以纠正或检测到我的代码中的错误。如果我提交所以它不工作没有向我显示解析显示的任何错误，根据他们的属性。我还添加了 parsely 库并且没有收到任何与之相关的错误，所以出了什么问题。

登录视图.html

<form class="form-horizontal" ng-submit='login()' data-validate="parsley">
                <div class="modal-header">
                    <h3>Login</h3>
                </div>

                <div class="modal-body">
                    <div class="form-group">
                        <label for="login-Name" class="col-lg-3 form-label">User Name:</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" id="login-Name" ng-model="LoginName" name="login-Name" placeholder="User Name" data-type="alphanum" data-required="true" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="login-Password" class="col-lg-3 form-label">Password:</label>
                        <div class="col-lg-8">
                            <input type="password" class="form-control" id="login-Password" ng-model="LoginPass" name="login-Password" placeholder="Password" data-type="alphanum" data-required="true" data-minlength="6" data-minlength="6" data-maxlength="20"/>
                        </div>
                    </div>
                </div>


                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">
                        <i class="icon-user icon-white"></i> Login
                    </button>
                </div>

            </form>

登录控制器.js

$scope.login = function() {

          var user = {
              "username" : $scope.LoginName,
              "password" : $scope.LoginPass
          }
      };
4

4 回答 4

6

花了我一些功夫和玩弄一些东西，但我最终创建了一个名为parsleyValidateInput. 把它放在你想用欧芹验证的每一个输入上。

咖啡脚本：

angular.module('app').directive 'parsleyValidateInput', ($timeout) ->
  link: (scope, element, attrs) ->
    element.on 'remove', ->
      element.closest('form').parsley('removeItem', "##{attrs.id}")

    $timeout ->
      element.attr('id', "input_#{_.uniqueId()}") unless element.attr('id')
      element.closest('form').parsley('addItem', "##{attrs.id}")

javascript:

angular.module('app').directive('parsleyValidateInput', function($timeout) {
  return {
    link: function(scope, element, attrs) {
      element.on('remove', function() {
        return element.closest('form').parsley('removeItem', "#" + attrs.id);
      });
      return $timeout(function() {
        if (!attrs.id) {
          attrs.id = "input_" + (_.uniqueId());
          element.attr('id', attrs.id);
        }
        return element.closest('form').parsley('addItem', "#" + attrs.id);
      });
    }
  };
});

利用：

<form parsley-validate>
   <div class='row' ng-repeat='book in books'>
   <input parsley-validate-input type='text' ng-model='books' required>
</form>
于 2014-02-05T03:25:53.913 回答
3

有一种最简单的方法可以做到这一点，这是我使用的指令：

angular.module('app').directive('validateForm', function() {
  return {
    restrict: 'A',
    controller: function($scope, $element) {
      var $elem = $($element);
      if($.fn.parsley)
        $elem.parsley();
    }
  };
});

用法：

<form class="form-horizontal" ng-submit="login()" validate-form=""  novalidate="">

nb:novalidate=""用于阻止 HTML5 验证。

于 2015-05-29T12:08:19.230 回答
0

我知道这条消息很旧，但我想我会回复希望它对某人有所帮助。

我最终做了类似于@yagudaev 的事情，但让它更通用一点，所以你不需要每个元素的 parsley 属性。相反，人们需要它在表单元素上作为属性。我还考虑了表单是否是动态加载的，所以欧芹仍然可以验证它。这是用 Parsley 2.x 和 Angular 1.3.x 和 1.4.x 测试的。

http://ryanalberts.com/797/parsley-validation-with-angularjs/

我应该注意到我最终走上了使用 ngMessage 的角度验证的路线，但增强了它的验证以允许重用带有值的验证消息（即，值需要在 X 和 Y 之间。X 和 Y 自动插入）其中 Parsley 是本质上比 Angular ngMessage 做得更好，它是 1.3+ 中的新表单验证。

于 2015-01-22T15:12:29.360 回答
0

Parsley要求动态加载的表单由 JavaScript 初始化。在这种情况下，您需要在 loginController.js 中执行此操作。

由于 Parsley 某处的最大调用堆栈大小超出错误，我无法让这个自己工作。我很想知道你是否得到同样的错误。

另一种方法是验证模型。您可以添加一个$watchtoLoginName和LoginPass，确定它们是否为空，并在范围（例如LoginNameIsValid）上设置变量，然后您可以使用这些变量来设置一个带有ng-class. 当有人单击提交按钮时，您所要做的就是检查您的有效性标志。

于 2013-11-16T17:58:22.040 回答