Laravel和angularjs表单验证

Question

我是angularjs和im玩家的新手。

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

并且json如果什么laravel retunrs形式验证失败

$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框架，并在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行代码的错误显示，你不能比这更简单...哦，我甚至支持你的自定义正则表达式，如果你想添加:)

没有更多的聚集形式10行代码用于1个输入，当你需要的只有2行时，不会再有，即使对于有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