3

我已经在互联网上搜索了如何$http在 codeigniter 中形成 Angular js 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';
    }
}
?>

何时使用角度$httpPOST 请求发送 html 表单数据我无法使用 codeigniter 表单验证库验证该数据。它会引发 此图像中给出的验证错误。

4

2 回答 2

2

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

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

您还可以发布您的数据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) {

});
于 2018-02-18T14:13:39.153 回答
0

当您使用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文件中管理它们，如此处所述。

这是 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送到服务器。

于 2018-02-18T14:30:37.920 回答