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';
    }
}
?>

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

Answer 1

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

});

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在codeigniter中发布json数据+服务器端验证

2 个答案: