基于Ajax提交formdata数据、错误信息展示和局部钩子、全局钩子的校验。

梦里梦外; 2021-12-21 23:41 126阅读 0赞

**formdata重点：**

1.  实例化FormData这个类
2.  循环serializeArray可以节省代码量
3.  图片要用$('\#id')\[0\].files\[0\]来获得
4.  加上contentType:false和processData:false

**错误信息展示重点：**

1.  input框的id是id\_field，可以通过循环错误信息获取错误信息的字段field，然后通过id\_filed展示错误信息
2.  展示错误信息前先把错误信息清空了

** 全局钩子重点：**

可在前端通过\_\_all\_\_获取全局错误信息并展示出来

html

<div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <form id="fm">
                    {% csrf_token %}
                    {% for field in form %}
                        <div class="form-group">
                            <label for="{
         { field.id_for_label }}">{
        { field.label }}</label>
                            {
         { field }}
                            <span class="error-info pull-right"></span>
                        </div>
                    {% endfor %}
    
                    <div class="form-group">
                        <label for="id_avatar">头像
                            <img width="60" height="60" id="avatar_img" src="/static/blog/img/default_avatar.jpg">
                        </label>
    
                        <input type="file" name="avatar" id="id_avatar" class="hidden">
                    </div>
    
                    <input type="button" id="reg_btn" class="btn btn-info" value="提交">
                </form>
            </div>
        </div>
    </div>

// 头像预览功能
        $('#id_avatar').change(function () {   // 图片发生了变化，所以要用change事件
            // 获取用户选中的文件对象
            let file_obj = $(this)[0].files[0];
    
            // 获取文件对象的路径
            let reader = new FileReader();  // 等同于在python里拿到了实例对象
            reader.readAsDataURL(file_obj);
    
            reader.onload = function () {
                // 修改img的src属性，src = 文件对象的路径
                $("#avatar_img").attr('src', reader.result);  // 这个是异步，速度比reader读取路径要快，
                                                              // 所以要等reader加载完后在执行。
            };
        });
    
        // 基于Ajax提交数据
        $('#reg_btn').click(function () {
            let formdata = new FormData();  // 相当于python里实例化一个对象
            let request_data = $('#fm').serializeArray();
            $.each(request_data, function (index, data) {
                formdata.append(data.name, data.value)
            });
            formdata.append('avatar', $('#id_avatar')[0].files[0]);
    
            $.ajax({
                url: '',
                type: 'post',
                contentType: false,
                processData: false,
                data: formdata,
                success: function (data) {
                    if (data.user) {
                        // 注册成功
                        location.href = '{% url "blog:login" %}'
                    } else {
                        // 注册失败
    
                        // 清空错误信息，每次展示错误信息前，先把之前的清空了。
                        $('span.error-info').html("");
                        $('.form-group').removeClass('has-error');
                        // 展示此次提交的错误信息
                        $.each(data.msg, function (field, error_list) {
                            if (field === '__all__') {  // 全局错误信息，在全局钩子里自己定义的
                                $('#id_re_pwd').next().html(error_list[0]);
                            }
                            $('#id_' + field).next().html(error_list[0]);
                            $('#id_' + field).parent().addClass('has-error');  // has-error是bootstrap提供的
                        });
                    }
                }
            })
        })

regForm.py

"""
    用户注册验证
    """
    from django import forms
    from django.forms import widgets, ValidationError
    
    from blog.models import UserInfo
    
    
    class RegForm(forms.Form):
        user = forms.CharField(
            max_length=32,
            min_length=6,
            error_messages={
                'required': '用户名不能为空',
                'max_length': '用户名长度不能超过32个',
                'min_length': '用户名长度不能少于6个',
            },
            label='用户名',
            widget=widgets.TextInput(
                attrs={
        'class': 'form-control'}
            )
        )
        pwd = forms.CharField(
            max_length=32,
            min_length=6,
            error_messages={
                'required': '密码不能为空',
                'max_length': '密码长度不能超过32个',
                'min_length': '密码长度不能少于6个',
            },
            label='密码',
            widget=widgets.PasswordInput(
                attrs={
        'class': 'form-control'}
            )
        )
        re_pwd = forms.CharField(
            max_length=32,
            min_length=6,
            error_messages={
                'required': '确认密码不能为空',
                'max_length': '密码长度不能超过32个',
                'min_length': '密码长度不能少于6个',
            },
            label='确认密码',
            widget=widgets.PasswordInput(
                attrs={
        'class': 'form-control'}
            )
        )
        email = forms.EmailField(
            max_length=32,
            error_messages={
                'required': '用户名不能为空',
                'invalid': '请输入正确的邮箱格式',
            },
            label='邮箱',
            widget=widgets.EmailInput(
                attrs={
        'class': 'form-control'}
            )
        )
    
        def clean_user(self):
            username = self.cleaned_data.get('user')
    
            user = UserInfo.objects.filter(username=username).first()
    
            if not user:
                return username
            else:
                raise ValidationError('该用户已注册')
    
        def clean(self):
            pwd = self.cleaned_data.get('pwd')
            re_pwd = self.cleaned_data.get('re_pwd')
    
            if pwd and re_pwd:
                if pwd == re_pwd:
                    return self.cleaned_data
                else:
                    raise ValidationError('两次密码不一致')

views.py

from django.contrib import auth
    from django.shortcuts import render, HttpResponse
    from django.http import JsonResponse
    
    from blog.utils.slide_auth_code import pcgetcaptcha
    from blog.forms.regForm import RegForm
    
    
    def register(request):
        if request.is_ajax():
            print(request.POST)
            form = RegForm(request.POST)
            response = {
        'user': None, 'msg': None}
            if form.is_valid():
                response['user'] = form.cleaned_data.get('user')
            else:
                print(form.cleaned_data)
                print(form.errors)
                response['msg'] = form.errors
    
            return JsonResponse(response)
    
        form = RegForm()
    
        context = {
            'form': form
        }
        return render(request, 'register.html', context=context)

转载于:https://www.cnblogs.com/lshedward/p/10384218.html