繁体   English   中英

在Angularjs 1.3中显示Laravel 5验证错误

Display Laravel 5 validation errors in Angularjs 1.3

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我是Laravel 5和angularjs的新手。 我正在一个项目中,该项目使用laravel 5作为后端,并使用angularjs作为前端。 我将laravel 5用于RESTful API路由,这些路由可通过angularjs前端访问。

我已经找到了一种解决方案,用于捕获laravel 5表单验证错误并将其显示在angularjs前端中,如下所示。

我的问题是:这是可接受的工作方式吗? 还是有更好的方法来实现这一目标?

我的代码:

Laravel 5中 :1.我正在通过专用的请求类进行表单验证。 例如,对于创建页面表单,我在app\\requests文件夹中有一个PageRequest类,其代码如下:

class PageRequest extends Request {

/**
 * Determine if the user is authorized to make this request.
 *
 * @return bool
 */
public function authorize()
{
    //any authorized user validations here..
    return true;
}

/**
 * Get the validation rules that apply to the request.
 *
 * @return array
 */
public function rules()
{
    return [
        'menuName' => 'required | min:5 | max:50',
        'position' => 'required',
        'visible'  => 'required'
    ];
}

}
2.接下来,在我的PagesController中,该页面提供了RESTful api的方法,例如create page表单将发回到PagesControllerstore方法,如下所示:

class PagesController extends BaseController{

    /**
     * Store a newly created resource in storage.
     *
     * @param PageRequest $request
     * @return Response
     */
    public function store(PageRequest $request)
    {
        $request['slug'] =$request['menuName'];
        return $this->page->create($request->all()) ? json_encode(['success'=>'true']) : json_encode($request->messages());
    }
}  

3.然后在我的angular content.js文件中,该文件使用控制器定义了ui路由器状态,我有以下代码片段来处理创建页面:

.state('content.subjects.pages.create',{
            url:'/create',
            views:{
                'forms@content.subjects':{
                    templateUrl:'/partials/create-page.html',
                    controller:['$scope', '$stateParams','$state', 'Subject', 'Page',
                    function($scope, $stateParams, $state, Subject, Page){
                        $scope.subject = {};
                        $scope.pages={};
                        $scope.messages={}; //place holder for the error messages
                        Subject.edit($stateParams.subjectSlug).success(function(data){
                           $scope.subject = data;
                        });
                        Subject.pages($stateParams.subjectSlug).success(function(data){
                            $scope.pages = data;
                        });
                        $scope.subject_id = $scope.subject.id;
                        $scope.submitPage = function(){
                            $scope.pageData['subject_id'] = $scope.subject.id;
                            Page.save($scope.pageData).success(function(data){
                                $scope.pages.push($scope.pageData);
                                $state.go('content.subjects.pages', {subjectSlug:$scope.subject.slug});
                            }).error(function(data){
                                //if the validation in laravel fails it will return the $request->messages as json
                                // we assign it to the $scope.messages object
                               $scope.messages = data;
                            });
                        };
                    }]
                }
            }
        })  

4.最后,在create-pages.html部分中,我可以将$ scope.messages引用为:

<div class="row page create-form" >
<!--<div id="messages" ng-show="message">{{ message }}</div>-->
<form class="form-horizontal create page" role="form" data-ng-submit="submitPage()">
    <h4 class="form-title">Create New Page</h4>
    <div class="form-group menuName">
        <div class="input-group has-feedback" data-ng-class="{'has-error':errorMenuName}">
            <span class="input-group-addon">Page Name</span>
            <input type="text" class="form-control menuName" name="menuName" data-ng-model="pageData.menuName"/>
            <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
        </div>
        <span class="text-danger">{{messages['menuName']}}</span>
    </div>
    <div class="form-group position">
        <div class="input-group has-feedback" data-ng-class="{'has-error':errorPosition}">
            <span class="input-group-addon">Position</span>
            <input type="text" class="form-control position" name="position" data-ng-model="pageData.position"/>
            <span class="glyphicon glyphicon-warning-sign form-control-feedback">}</span>
        </div>
        <span class="text-danger">{{messages['position'][0]}}</span>
    </div>
    <div class="form-group visible">
        <div class="input-group has-feedback" data-ng-class="{'has-error':errorVisible}">
            <span class="input-group-addon">Published</span>
            <input type="text" class="form-control visible" name="visible" data-ng-model="pageData.visible"/>
            <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
        </div>
        <span class="text-danger">{{messages['visible'][0]}}</span>
    </div>
    <div class="form-group layout">
        <div class="input-group hidden has-feedback" data-ng-class="{'has-error':errorLayout}">
            <span class="input-group-addon">Page Layout</span>
            <input type="text" class="form-control layout" name="layout" data-ng-model="pageData.layout"/>
            <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
        </div>
    </div>
    <div class="form-group form-action create">
        <div class="btn-container create">
            <button class="btn btn-formIcon" type="submit"><span class="glyphicon glyphicon-plus"> Create</span></button>
        </div>
    </div>
</form>


有更好的方法吗?

任何有关更好方法的建议将不胜感激。

问题暂未有回复.您可以查看右边的相关问题.
2 拦截angularjs中的Laravel验证错误

我目前正在使用angular js前端并使用Laravel作为后端api为我的网站编写联系表单。 这是我作为一个领域的例子。 这会通过我的控制器拨打电话。 然后将其传递给我的laravel控制器。 当我将数据登录到控制台时,我得到了。 对象错误:对象contact_em ...

3 使用AJAX显示Laravel验证错误

我在Laravel中有一个使用Laravel提交的Form , Laravel都运行良好,但问题是我无法在HTML中呈现验证的错误。 (我想在我的HTML中的&lt;ul&gt;&lt;li&gt;中显示错误) 这是我的Ajax请求: 控制台日志: 谢谢你的帮助。 ...

4 捕获并显示从angularjs中的$ http.post返回的laravel验证错误

我是laravel和laravel 5的新手,所以我很难受,这只是一个又一个问题,我当前的问题是这样,我在前端使用了Angular js,所以我已经可以进行客户端验证了,实现,现在当我通过$ http.post发送表单时,该表单也在服务器上进行了验证,如果存在验证错误,它会在响应中返回整个页面, ...

5 Cakephp 1.3模型验证错误

我正在为用户模型进行一些基本的模型验证,但是不幸的是,验证无法正常工作。 这些是我的错误: 如果使用“必需”,则始终显示错误消息 如果未使用“必需”,即使输入了错误的变量,也不会出现错误消息(即:键入字母A作为名称)。 电子邮件正在“ name-gmail.com ...

6 AngularJS表单:在提交时显示验证错误?

我正在使用Angular JS 1.5.11。 我的表单上有错误消息和样式。 我发现了有关如何触发模糊,去抖动等验证的信息。 但是我也希望在提交表单时检查字段。 我发现了有关如何判断表单在提交时是否有效然后处理表单的信息-只是没有在用户提交时如何激活字段错误消息。 澄清一下 ...

7 使用AngularJS显示表单验证错误

这是我当前的html代码: 现在,这对于在任何情况下都是必需的字段都适用。 但是,假设用户可以选择“发型”之类的标签,并且必须描述颜色字段和长度字段。 如果这些字段为空白,则显示一条小消息(例如ng-show)。 因此,根据用户选择的选项卡,如果未输入该选项卡的正确信息,则用户 ...

8 在angularjs上显示服务器端验证错误

我想使用角形式机制显示服务器端验证错误,所以在我的http.post catch函数中我有这样的代码: 将错误设置为无效的字段并设置验证错误代码。 此解决方案的问题是,如果从服务器提供自定义验证错误代码(例如,自定义服务器端验证代码),则需要在值更改时手动将字段有效性设置为true。 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM