AngularJS post json codeigniter 中的数据 + 服务器端验证

Question

我在整个互联网上搜索了如何在 codeigniter 中形成由 Angular js $http POST 请求发送的验证数据。

为了清楚理解，我发布了完整的 HTML 数据。我相信大多数开发人员都在寻找这种解决方案。

这是我的HTML表格：

<!DOCTYPE html>
<html>
    <head>
        <style>
            input[type="text"].ng-invalid{border: 1px solid red; }
        </style>
    </head>
    <body ng-app="app" ng-controller="ctrl">

        <form name="test_form" ng-submit="send_data()">
            <input type="text" name="email" ng-model="email">
            <span ng-show="test_form.email.$invalid - required">Required</span>

            <input type="password" name="password" ng-model="password">
            <span ng-show="test_form.email.$invalid - required">Required</span>

            <button type="submit">Submit</button>
        </form>


        <script src="<?php echo base_url('assets/angular/angular.min.js'); ?>" type="text/javascript">
        </script>
        <script>
                    angular.module('app', [])
                    .controller('ctrl', function ($scope, $http) {
                        $scope.send_data = function () {
                            $http({
                                method: "POST",
                                url: "<?php echo base_url('login/test_angular_validate'); ?>",
                                data: {email: $scope.email, password: $scope.password},
                                headers : {'Content-Type': 'application/x-www-form-urlencoded'}
                            }).then(function (success) {
                                console.log(success);
                            }, function (error) {

                            })
                        }
                    });
        </script>
    </body>
</html>

后端 Codeigniter 登录控制器功能

<?php
public function test_angular_validate() {
    $form_data = json_decode(file_get_contents("php://input"), true);

    $this->load->helper(array('form', 'url'));

    $this->load->library('form_validation');

    $this->form_validation->set_rules('email', 'email', 'required|min_length[3]');
    $this->form_validation->set_rules('password', 'password', 'required');

    if ($this->form_validation->run() == FALSE) {
        echo 'failed';
        print_r(validation_errors());
    } else {
        echo 'success';
    }
}
?>

何时使用 angular $http POST 请求发送 html 表单数据我无法使用 codeigniter 表单验证库验证该数据。它会抛出 this image 中给出的验证错误。

Answer 1

Codeigniter 访问超级全局 $_POST 进行验证。您的 JSON 数据未绑定到此超全局。所以你需要手动设置：

$_POST = json_decode(file_get_contents("php://input"), true);

您还可以 POST 您的数据 URLENCODED。这样一来，您的 POST 参数将在 $_POST 中可用，无需手动设置。

$http({
    method: 'POST',
    url: "<?php echo base_url('login/test_angular_validate'); ?>",
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    data: {
        email: $scope.email, 
        password: $scope.password
    },
    transformRequest: function(obj) {
        var str = [];
        for(var p in obj)
            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        return str.join("&");
    },
}).then(function (success) {
    console.log(success);
}, function (error) {

});

Answer 2

由于您正在使用 Codeigniter 表单验证库，您最好将请求数据转换为 array 如下：

$objectRequest = json_decode( file_get_contents("php://input") );
$this->request = xss_clean(json_decode(json_encode($objectRequest), true));

此外，您不需要为每个数据使用 set_rules 函数，而是可以在 config/form_validation.php 文件中管理它们，如前所述 here.

这是 form_validation.php 中的示例：

$config = [

    'user_config' => [
        [
            'field' => 'user[phone]',
            'rules' => 'required|numeric|max_length[100]|min_length[10]'
        ],
        [
            'field' => 'user[phoneCode]',
            'rules' => 'required|numeric'
        ]
    ],
];

然后在你的代码中：

if ( !$this->form_validation->run('user_config') ) exit();

只需要在Angularjs表中有相应的名字即可(ng-model)

示例：

<span class="form_row">
    <input ng-model="login.user.phoneCode" name="phoneCode" ng-required="true" ng-pattern="mobileCodePattern" size="6" type="text">
</span>
<span class="form_row">
    <input ng-model="login.user.phone" name="phone" ng-required="true" ng-pattern="numberOnly" type="text">
</span>

并发送$scople.login到服务器。

AngularJS post json codeigniter 中的数据 + 服务器端验证

AngularJS post json data + server side validation in codeigniter

php

angularjs

codeigniter

server-side-validation