jdango 项目试炼blog--基于Form组件ajax用户注册

Posted 2021-02-17 新手码农__威

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jdango 项目试炼blog--基于Form组件ajax用户注册相关的知识，希望对你有一定的参考价值。

1、利用form组件建立form组件

from app01.models import UserInfo
from django import forms
from django.forms import widgets
from django.core.exceptions import  ValidationError

class UserFrom(forms.Form):   #固定格式

    user = forms.CharField(max_length=32,label=‘用户名‘,  # 设置前端lable标签
                           error_messages={‘required‘:‘该字段不能为空‘}, # 当用户未输入时报错信息
                           widget=widgets.TextInput(attrs={‘class‘:‘form-control‘}))  # 设置input的type 添加类标签
    pwd = forms.CharField(max_length=32,label=‘密码‘,
                          widget=widgets.PasswordInput(attrs={‘class‘: ‘form-control‘}))
    re_pwd = forms.CharField(max_length=32,label=‘确认密码‘,
                             widget=widgets.PasswordInput(attrs={‘class‘: ‘form-control‘}))
    email = forms.EmailField(max_length=32,label=‘电子邮箱‘,
                             error_messages={‘required‘: ‘格式错误‘},
                             widget=widgets.EmailInput(attrs={‘class‘: ‘form-control‘}))

    # 建立局部钩子
    def clean_user(self):
        user = self.cleaned_data.get(‘user‘)  # 已经过校验
        user_obj = UserInfo.objects.filter(username=user).first()
        if user_obj:
            #已被注册
            raise ValidationError(‘该用户已注册‘)
        else:
            return user

    # 建立全局钩子
    def clean(self):
        pwd = self.cleaned_data.get(‘pwd‘)
        re_pwd = self.cleaned_data.get(‘re_pwd‘)

        if pwd == re_pwd:
            return self.cleaned_data
        else:
            raise ValidationError(‘密码不一致‘)

2、views中注册验证

def register(request):
    form = UserFrom() # 生成form组件
    send_info = {‘user‘:None,‘msg‘:None}
    if request.method == ‘POST‘:
        form_obj = UserFrom(request.POST)
        if form_obj.is_valid():   # form表单进行格式校验
            send_info[‘user‘] = form_obj.cleaned_data.get(‘user‘)

            user = request.POST.get(‘user‘)
            pwd = request.POST.get(‘pwd‘)
            re_pwd = request.POST.get(‘re_pwd‘)
            email = request.POST.get(‘email‘)
            img = request.FILES.get(‘img‘)

            # 非明文存储
            UserInfo.objects.create_user(username=user,password=pwd,email=email,avatar=img)

        else:
            print(form_obj.cleaned_data) # 存放了所有正确信息
            print(form_obj.errors)  # 存放了所有错误信息
            send_info[‘msg‘] = form_obj.errors # 全局变量信息K为__all__
        return JsonResponse(send_info)

    return render(request,‘register.html‘,locals())

3、前端样式

<div class=‘container‘>
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
        <h1 class="text-center">用户注册</h1>
            <form >
                {% csrf_token %}

                {#form组件建立模型#}
                {% for filed in form %}
                <div class="form-group">
                    <label for="user">{{ filed.label }}</label>
                    {{ filed }}<span class="err_info pull-right"></span>
                </div>
                {% endfor %}

                <label for="img">头像
                    <div>
                        <img src="/static/img/timg.jpg" id="image">
                    </div>
                </label>
                <input id="img" type="file" style="display: none">

            <div>
                <input type="button" class="btn btn-info pull-right" value="提交" id="btn">
            </div>
            </form>
        </div>
    </div>
</div>

4、jquery

<script>
    $(function () {
        //头象预览
        $(‘#img‘).change(function () {
            // 获取文件对象
            var file = $(‘#img‘)[0].files[0];
            // 获得文件对象的路径（文件阅读器）
            var reader = new FileReader();
            reader.readAsDataURL(file);//阅读文件的路径，并把结果保存在reader.result
            //更改文件路径(与reader.readAsDateURL是异步操作，需要用onload加载完再执行)
            reader.onload = function(){
            $(‘#image‘).attr(‘src‘,reader.result)}
        })
        

　　　　　//ajax输入验证
        $(‘#btn‘).click(function () {
            var formdata = new FormData
            formdata.append(‘user‘,$(‘#id_user‘).val());  //从form传来组件，默认id=id_组件名
            formdata.append(‘pwd‘,$(‘#id_pwd‘).val());
            formdata.append(‘re_pwd‘,$(‘#id_re_pwd‘).val());
            formdata.append(‘email‘,$(‘#id_email‘).val());
            formdata.append(‘img‘,$(‘#img‘)[0].files[0]);
            formdata.append(‘csrfmiddlewaretoken‘,$(‘[name =csrfmiddlewaretoken]‘).val());

            $.ajax({
                url:‘‘,
                type:‘POST‘,
                contentType:false,
                processData:false,
                data:formdata,
                success:function (data) {

                    if(data.user){
                        location.href= ‘/login/‘
                    }
                    else{
                        console.log(data[‘msg‘]);
                        {#清空错误信息#}
                        $(‘.err_info‘).text(‘‘);
                        $(‘.form-group‘).removeClass(‘has-error‘);
                        {#循环打印msg中的错误信息#}
                        $.each(data[‘msg‘],function (msg_k,msg_v) {
                            {#判断是不是全局钩子#}
                            if(msg_k==‘__all__‘){
                                $(‘#id_re_pwd‘).next().text(msg_v)
                                $(‘#id_pwd,#id_re_pwd‘).parent().addClass(‘has-error‘)
                            }
                            $(‘#id_‘+msg_k).next().text(msg_v);
                            $(‘#id_‘+msg_k).parent().addClass(‘has-error‘)  // 添加错误边框样式
                        })
                    }
                }
            })
        })
    })

</script>