2

我是 angularjs 的新手，我在玩它。

我坚持一件事，在 jQuery 中，从 laravel 检索验证错误消息 json 对象更容易，我可以使用角度，但我正在这样做，我确信有更有效的方法

我来自

<div class="row">
    <div class="col-lg-8">
        <h5><?php echo  Lang::get('auth.signup') ?></h5>
        <div class="page-divider"></div>

        <form name="myForm" ng-controller="formController" ng-submit="signupPost()" class="form-horizontal" novalidate>

            <div class="form-group">
                <label for="first_name" class="col-lg-3 control-label"><?php echo Lang::get('form.first_name') ?></label>
                <div class="col-lg-8">
                  <input type="text" name="first_name" ng-model="formData.first_name" id="first_name" class="form-control input-small">
                  <span class="help-block" ng-show="errors['first_name'][0]">{{ errors['first_name'][0] }}</span>
                </div>
            </div>

            <div class="form-group">
                <label for="last_name" class="col-lg-3 control-label"><?php echo Lang::get('form.last_name') ?></label>
                <div class="col-lg-8">
                  <input type="text" name="last_name" ng-model="formData.last_name" id="last_name" class="form-control input-small">
                  <span class="help-block" ng-show="errors['last_name'][0]">{{ errors['last_name'][0] }}</span>
                </div>
            </div>

            <div class="form-group">
                <label for="username" class="col-lg-3 control-label"><?php echo Lang::get('form.username') ?></label>
                <div class="col-lg-8">
                  <input type="text" name="username" ng-model="formData.username" id="username" class="form-control input-small">
                  <span class="help-block" ng-show="errors['username'][0]">{{ errors['username'][0] }}</span>
                </div>
            </div>

            <input type="submit" value="<?php echo Lang::get('auth.signup') ?>" class="btn btn-primary">
        </form>
    </div>

</div>

角度控制器

function formController($scope, $http) 
{
    $scope.formData = {};

    $scope.signupPost = function() {

        $http.post('signup', $scope.formData).success(function(data){

            if(data.msg == "success")
            {
                $location.path(data.redirect)
            }
            else
            {
                $scope.errors = data.error_msg;
            }
        });
    }
}

如果表单验证失败，那么 laravel 会返回什么 json

 $messages = $val->messages();

            $data = array(
                'error_msg' => array(
                    'first_name'           => $messages->get('first_name'),
                    'last_name'            => $messages->get('last_name'),
                    'username'             => $messages->get('username'),
                    'profession'           => $messages->get('profession'),
                    'location'             => $messages->get('location'),
                    'email'                => $messages->get('email'),
                    'gender'               => $messages->get('gender'),
                    'password'             => $messages->get('password'),
                    'dob'                  => $messages->get('dob'),
                    'confirm_password'     => $messages->get('confirm_password'),
                ));
        }

        return Response::json($data);

我尝试了一些变体，目前它在表单中像这样工作，如果设置了表单验证错误消息，则显示errors['first_name'][0]所有字段。

我的问题是，有没有更有效的方法来做到这一点？如果有人可以给我看一个例子会很棒

谢谢

4

2 回答 2

3

那么你可以做这样的事情

<div class="col-lg-8">
   <input type="text" name="first_name" ng-model="formData.first_name" id="first_name" class="form-control input-small">
   <span class="help-block" ng-show="errors.first_name[0]">{{ errors.first_name.toString()}}</span>
</div>

该函数将使用作为分隔符toString()连接字符串数组。,如果您想要自定义内容，您可以选择

  • 编写一个 javascript 函数，接收并返回一些格式化数据。

  • 更角度的方法是ng-repeat对错误进行处理。

    <span ng-repeat='error in errors.first_name'>
  {{error}}
</span>

于 2013-08-23T07:24:29.643 回答
0

我知道这个问题很老了，但我想分享我很棒的新 angular 指令，我在 Github 上做了一个项目，我认为它与可用/可用的任何东西相比简直是摇滚......我基于优秀的 Laravel PHP 框架和使它在 Angular 下可用......因为我使用与 Laravel 非常相似的方法，但使用的是 AngularJS 指令（我自己的指令），你会发现我的实现很容易遵循。

<!-- example 1 -->
<label for="input1">Simle Integer</label>
<input type="text" validation="integer|required" ng-model="form1.input1" name="input1" />
<span class="validation text-danger"></span>

<!-- example 2 -->
<label for="input2">Alphanumeric + Exact(3) + required</label>
<input type="text" validation="alpha|exact_len:3|required" ng-model="form1.input2" name="input2" />
<span class="validation text-danger"></span>

所以我可以在一个简单的指令中定义我想要的任何数量的验证规则，validation="min_len:2|max_len:10|required|integer"并且错误消息将始终显示在下一个<span>你们不喜欢它了吗？1 行代码用于输入，1 行代码用于错误显示，你不能比这更简单......哦，如果你想添加，我什至支持你的自定义 Regex :)

不再有 10 行的集群表单当您唯一需要的是 2 行时，1 个输入的代码，仅此而已，即使对于带有 5 个验证器的输入也是如此。不用担心表格不会失效，我也处理好了，这一切都处理得很好。

看看我的 Github 项目Angular-Validation并传播这个词 =)

编辑
为了使用户体验更加流畅，我添加了计时器验证。这个概念很简单，不要在用户忙于打字时打扰他，但要验证他是否暂停或更改输入（onBlur）......喜欢它！
您甚至可以根据自己的喜好自定义计时器，我决定在指令中将其默认为 1 秒，但如果您想自定义，您可以调用例如typing-limit="5000"5 秒。暂停。完整示例：

<input type="text" validation="integer|required" typing-limit="5000" ng-model="form1.input1" name="input1" />
<span class="validation text-danger"></span>


DEMO在Plunker
上添加了现场演示

于 2015-01-04T22:11:38.977 回答