用户注册思路

注册最主要的就是校验数据，分为前端校验与后端校验

对于非一般用户来说，可以通过修改前端代码来修改检查步骤，使其向后台发送不和规则的数据，如果后端没有检查，那么就会造成影响，比如注册信息，投票选择信息等

思考：

1. 注册要做什么？

　　传送用户名密码及一些相关信息，然而首先要验证的是用户名，用户名存在的话就不给注册，不存在则注册

2. 从哪开始校验用户名

　　在input框失去焦点是异步校验　　

<div class="login-body">
        <div class="login-card">
            <div class="login-top">
                <h3>新用户注册</h3>
                <h5>尊敬的用户，欢迎您回来！</h5>
            </div>
            <div class="login-bottom">
                <form method="post" action="/user/register/" onsubmit="return register();">
                    <div class="login-input-box">
                        {% csrf_token %}
                        <input type="text" id="uname" name="uname" value="" onfocus="resetUname()" onblur="checkUname(this.value)" class="login-admin"
                               placeholder="用户注册">
                        <span style="color:red;" id="aSpan"></span>

                        <input type="password" id="pwd" name="pwd" value="" onfocus="resetUname()" class="login-password">
                        <span style="color:red;" id="pSpan"></span>

                        <button class="login-btn" style="color: white;text-decoration: none;cursor: pointer">注册</button>
                    </div>
                </form>
                <div class="login-img">
                    <img src="/static/login_05.png" alt="">
                </div>
            </div>
        </div>
    </div>

html

<script>
        function isEmail(str) {
            var reg = /^[a-zA-Z0-9_-]{6,}@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            return reg.test(str);
        }

        function resetUname() {
            $('#aSpan').text('');
            $('#pSpan').text('');
        }

        function checkUname(username) {
            var flag = false;
            $.ajax({
                url: '/user/checkUname/',
                type: 'GET',
                async: false,
                data: {'uname': username},
                success: function (result) {
                    var cflag = result.flag;
                    if (cflag) {
                        $('#aSpan').html('用户名已存在！');
                    }else {
                        flag = true;
                    }
                }
            });
            return flag;
        }

        function register() {
            //获取输入框的值
            var account = $('#uname').val();
            var password = $('#pwd').val();

            //简单校验
            if (account.length < 6 || !isEmail(account) || !checkUname(account)) {
                $('#aSpan').text('邮箱格式不正确！');
                return false;
            }

            if (password.length < 6) {
                $('#pSpan').text('密码长度不能小于六位');
                return false;
            }

            hex_pwd = hex_md5(password);
            $('#pwd').val(hex_pwd);
            return true;
        }
    </script>

class CheckUnameView(View):
    def get(self,request):
        #获取请求参数
        uname = request.GET.get('uname','')

        #根据用户名去数据库中查询
        userList = UserInfo.objects.filter(uname=uname)

        flag = False

        #判断是否存在
        if userList:
            flag = True

        return JsonResponse({'flag':flag})

后端校验用户名

猜你喜欢