Question

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

我坚持一件事，在jQuery中更容易从laravel中检索验证错误消息json对象，我可以使用angular，但我这样做并且我确定有更有效的方法< / p>

我来自

<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;
            }
        });
    }
}

如果表单验证失败，那么json什么laravel重新启动

 $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]适用于所有字段。

我的问题是，有更有效的方法吗？如果有人能告诉我一个例子会很棒

谢谢

Answer 1

你可以做这样的事情

<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>

Answer 2

我知道这个问题很老但是我想分享我很棒的新角度指令，我在Github做了一个项目，我觉得它只是比较可用的东西...我基于优秀的Laravel PHP Framework并使其在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行代码，你不能简单...哦，如果你想添加:)我甚至支持你的自定义正则表达式:)

当你需要的只有2行时，不再需要10行代码的集群表格，即使对于有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>

样本
在Plunker

上添加了一个实时演示

Laravel和angularjs形成验证

2 个答案: