创新实训（二）系统注册功能实现

注册功能实现

通过注册功能实现账号的申请，同时兼有传统注册功能都有的用户名重复校验，密码长度校验，密码正确性校验，注册成功提醒等功能，首先是前端用户注册相关信息表单的提交
以下是前端页面展示

下面具体介绍代码和功能的实现，前端表单的提交和验证功能主要在register.php文中
这个系统的注册功能通过一个PHP脚本实现，该脚本包括一个处理用户提交注册表单的函数和前端注册表单。以下是该注册功能的详细介绍：

1. 表单验证和处理

函数 handleRegisterPost 处理注册表单的POST请求，具体流程如下：

function handleRegisterPost() {
    // CSRF检查
    if (!crsf_check()) {
        return '页面已过期';
    }
    // 表单字段验证
    if (!isset($_POST['username']) || !isset($_POST['password']) || !isset($_POST['email'])) {
        return "无效表单";
    }
    $username = $_POST['username'];
    $password = $_POST['password'];
    $email = $_POST['email'];
    
    // 字段值验证
    if (!validateUsername($username)) {
        return "失败：无效用户名。";
    }
    if (queryUser($username)) {
        return "失败：用户名已存在。";
    }
    if (!validatePassword($password)) {
        return "失败：无效密码。";
    }
    if (!validateEmail($email)) {
        return "失败：无效电子邮箱。";
    }

    // 密码处理
    $password = getPasswordToStore($password, $username);
    $esc_email = DB::escape($email);
    $svn_pw = uojRandString(10);

    // 数据库插入
    if (!DB::selectCount("SELECT COUNT(*) FROM user_info"))
        DB::query("insert into user_info (username, email, password, svn_password, register_time, usergroup) values ('$username', '$esc_email', '$password', '$svn_pw', now(), 'S')");
    else
        DB::query("insert into user_info (username, email, password, svn_password, register_time) values ('$username', '$esc_email', '$password', '$svn_pw', now())");

    return "欢迎你！" . $username . "，你已成功注册。";
}

CSRF检查：首先检查CSRF token，以防止跨站请求伪造。如果检查失败，返回“页面已过期”。
表单字段验证：检查表单是否包含username、password和email字段，如果缺少任何一个字段，返回“无效表单”。
字段值获取：从表单中获取username、password和email的值。
字段值验证：
- 验证用户名是否合法，若不合法返回“失败：无效用户名。”。
- 检查用户名是否已存在，若存在返回“失败：用户名已存在。”。
- 验证密码是否合法，若不合法返回“失败：无效密码。”。
- 验证电子邮箱是否合法，若不合法返回“失败：无效电子邮箱。”。
密码处理：调用getPasswordToStore函数处理密码以存储。
数据库插入：
- 使用DB::escape对电子邮箱进行转义以防止SQL注入。
- 为用户生成一个随机的SVN密码。
- 插入新用户数据到数据库中，若这是第一个用户，则将其设为超级用户。

成功注册后返回“欢迎你！[username]，你已成功注册。”

2. 用户名检查

脚本还处理用户名检查请求：

用户名检查请求处理：检查提交的用户名是否合法并且是否已存在，如果都满足条件则返回{"ok": true}，否则返回{"ok": false}。

3. 前端注册表单

<form id="form-register" class="form-horizontal">
    <!-- 电子邮箱输入 -->
    <div id="div-email" class="form-group">
        <label for="input-email" class="col-sm-2 control-label"><?= UOJLocale::get('email') ?></label>
        <div class="col-sm-3">
            <input type="email" class="form-control" id="input-email" name="email" placeholder="<?= UOJLocale::get('enter your email') ?>" maxlength="50" />
            <span class="help-block" id="help-email"></span>
        </div>
    </div>
    <!-- 用户名输入 -->
    <div id="div-username" class="form-group">
        <label for="input-username" class="col-sm-2 control-label"><?= UOJLocale::get('username') ?></label>
        <div class="col-sm-3">
            <input type="text" class="form-control" id="input-username" name="username" placeholder="<?= UOJLocale::get('enter your username') ?>" maxlength="20" />
            <span class="help-block" id="help-username"></span>
        </div>
    </div>
    <!-- 密码输入 -->
    <div id="div-password" class="form-group">
        <label for="input-password" class="col-sm-2 control-label"><?= UOJLocale::get('password') ?></label>
        <div class="col-sm-3">
            <input type="password" class="form-control" id="input-password" name="password" placeholder="<?= UOJLocale::get('enter your password') ?>" maxlength="20" />
            <input type="password" class="form-control top-buffer-sm" id="input-confirm_password" placeholder="<?= UOJLocale::get('re-enter your password') ?>" maxlength="20" />
            <span class="help-block" id="help-password"></span>
        </div>
    </div>
    <!-- 提交按钮 -->
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-3">
            <button type="submit" id="button-submit" class="btn btn-secondary"><?= UOJLocale::get('submit') ?></button>
        </div>
    </div>
</form>

<script type="text/javascript">
// 验证并提交注册表单
function submitRegisterPost() {
    if (!validateRegisterPost()) {
        return;
    }
    
    $.post('/register', {
        _token : "<?= crsf_token() ?>",
        register : '',
        username : $('#input-username').val(),
        email : $('#input-email').val(),
        password : md5($('#input-password').val(), "<?= getPasswordClientSalt() ?>")
    }, function(msg) {
        if (/^欢迎你！/.test(msg)) {
            BootstrapDialog.show({
                title : '注册成功',
                message : msg,
                type : BootstrapDialog.TYPE_SUCCESS,
                buttons: [{
                    label: '好的',
                    action: function(dialog) {
                        dialog.close();
                    }
                }],
                onhidden : function(dialog) {
                    var prevUrl = document.referrer;
                    if (!prevUrl) {
                        prevUrl = '/';
                    };
                    window.location.href = prevUrl;
                }
            });
        } else {
            BootstrapDialog.show({
                title : '注册失败',
                message : msg,
                type : BootstrapDialog.TYPE_DANGER,
                buttons: [{
                    label: '好的',
                    action: function(dialog) {
                        dialog.close();
                    }
                }],
            });
        }
    });
}
$(document).ready(function() {
    $('#form-register').submit(function(e) {
        submitRegisterPost();
        return false;
    });
});
</script>