django_forms组件用ajax发送数据验证注册

forms组件
        -forms是什么?
            就是一个类,可以校验字段(前台传过来的字段)
        -怎么用:
        -校验字段功能:
            -先写一个类,继承Form
            from django.shortcuts import render, HttpResponse
            from django import forms
            # 写一个类,要校验那些字段,就是类的属性
            class MyForm(forms.Form):
                # 定义一个属性,可以用来校验字符串类型
                # 限制最大长度是8,最小长度是3
                name=forms.CharField(max_length=8,min_length=3)
                pwd=forms.CharField(max_length=8,min_length=3,required=True)
                # 校验是否是邮箱格式
                email=forms.EmailField()
            -使用:
                #实例化产生对象,传入要校验的数据(字典)
                myform=MyForm(request.POST)
                # is_valid如果是true表示校验成功,反之,校验失败
                if myform.is_valid():
                    # 校验通过的数据
                    print(myform.cleaned_data)
                    return HttpResponse('校验成功')
                else:
                    print(myform.cleaned_data)
                    #校验失败的信息
                    print(myform.errors)
            -注意:校验的字段,可以多,但是不能少
        -渲染模板
            -第一中方式:(灵活性最高)
                <form action="" method="post" >
                    <p>用户名: {{ myform.name }}</p>
                    <p>密码: {{ myform.pwd }}</p>
                    <p>邮箱: {{ myform.email }}</p>
                    <input type="submit" value="提交">
                </form>
            -第二种方式:for循环form对象(用的比较多):
                <form action="" method="post" >
                    {% for foo in myform %}
                        <p>{{ foo.label }}:{{ foo }}</p>
                    {% endfor %}
                    <input type="submit" value="提交">
                </form>
            -第三种方式(不建议用):
                <form action="" method="post" >

            {#    {{ myform.as_p }}#}
                {{ myform.as_ul }}
                <input type="submit" value="提交">
                </form>
                
        -渲染错误信息
            - myforms有errors
            -属性(name)也有errors
            -错误信息,变成中文:
                - error_messages={'max_length': '最长是8', 'min_length': '最短是3', 'required': '这个必须填','invalid': '不符合邮箱格式'}
            -给input标签指定样式,指定格式:
                 -widget=widgets.TextInput(attrs={'class':'form-control'})
            -模板,渲染错误信息:<span>{{ myform.name.errors.0 }}</span>
        -局部钩子校验
            -定义一个函数,名字叫:clean_字段名字,内部,取出该字段,进行校验,如果通过,将该字段返回,如果失败,抛异常(ValidationError)
            -   def clean_name(self):
                    # self:当前form对象
                    name = self.cleaned_data.get('name')
                    if name.startswith('sb'):
                        # 失败,抛异常
                        raise ValidationError('不能以傻逼开头')
                    # 正常,把name返回
                    return name
        -全局钩子
            #重写clean方法
            def clean(self):
                #程序能走到该函数,前面校验已经通过了,所以可以从cleaned_data中取出密码和确认密码        
                pwd=self.cleaned_data.get('pwd')
                re_pwd=self.cleaned_data.get('re_pwd')
                #进行自己的校验
                if pwd==re_pwd:
                    #通过,直接返回cleaned_data
                    return self.cleaned_data
                else:
                    #失败,抛异常(ValidationError)
                    raise ValidationError('两次密码不一致'

---------------------------------views代码--------------------------------------------------
from django.shortcuts import render, HttpResponse,redirect

from django.http import HttpRequest, JsonResponse

# Create your views here.
# ---------------------2018/11/21-----------------------
from django import forms
from django.core.exceptions import ValidationError
from django.forms import widgets
from app01 import models


class MyForm(forms.Form):
    name = forms.CharField(max_length=8, min_length=3, label='用户名', error_messages={
        'max_length': '最长是8个字符',
        'min_length': '最短是3个字符',
        'required': '这个必须填'
    },widget=widgets.TextInput(attrs={'class': 'form-control'}))
    pwd = forms.CharField( max_length=8, min_length=3, required=True, label='密码',
                          error_messages={
                              'max_length': '最长是8个字符',
                              'min_length': '最短是3个字符',
                              'required': '这个必须填'
                          },widget=widgets.PasswordInput(attrs={'class': 'form-control'}))
    re_pwd = forms.CharField( max_length=8, min_length=3, required=True, label='请再次输入密码',
                             error_messages={
                                 'max_length': '最长是8个字符',
                                 'min_length': '最短是3个字符',
                                 'required': '这个必须填'
                             },widget=widgets.PasswordInput(attrs={'class': 'form-control'}))
    email = forms.EmailField(label='邮箱', error_messages={
        'required': '这个必须填',
        'invalid': '不符合邮箱格式'
    },widget=widgets.TextInput(attrs={'class': 'form-control'}))

    def clean_name(self):
        name = self.cleaned_data.get('name')

        name_list = models.Book.objects.all()
        for user_name in name_list:

            if user_name.name == name:
                raise ValidationError('用户已存在')

        return name
  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('两次密码输入不一致')


def form(request):
    if request.method == 'GET':
        myform = MyForm()
        print(request.GET)
        return render(request,'form1.html',locals())
    elif request.method == 'POST':
        # print(request.POST)
        # print(request.body)

        print('在这---------------------------------------')
        # print(request.body)
        user_info = json.loads(request.body.decode('utf-8'))
        print(user_info)
        myform = MyForm(user_info)
        # myform = MyForm(request.POST)
        # print(myform)

        # return HttpResponse()
        # print(myform)
        if myform.is_valid():
            print('66666')
            data = myform.cleaned_data
            print(data)
            return JsonResponse(200,safe=False)
            # return HttpResponse(data)
        else:
            # all_error = myform.errors.get('__all__')
            # print('pppppp')
            # print(myform.errors)
            # print(all_error)
            # if all_error:
            #     all_error = all_error[0]
            return JsonResponse(myform.errors)

--------------------------------前端代码------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="col-md-4 col-md-offset-4">
    <form novalidate class="form-horizontal">
        <div>

            {% for foo in myform %}
                {#                <p>{{ foo.label }} : {{ foo }} <span>{{ foo.errors.0 }}</span></p>#}
                <p>{{ foo.label }} : {{ foo }} <span id="{{ foo.name }}_box" style="color: red"></span></p>


            {% endfor %}
            {#            <p>#}
            {#                <button id="btn" class="btn btn-primary">提交</button>#}
            {#                <span>{{ all_error }}</span>#}
            {#            </p>#}
        </div>
    </form>
    <button id="btn" class="btn btn-primary">提交</button>
    <span id="btn_box"></span>
</div>
</body>
<script>
    $('#btn').click(function () {

        var user_info = {
            'name': $('#id_name').val(),
            'pwd': $('#id_pwd').val(),
            're_pwd': $('#id_re_pwd').val(),
            'email': $('#id_email').val()
        };
        var pos = JSON.stringify(user_info);
        $.ajax({
            url: '/form1/',
            type: 'post',
            contentType: 'application/json',
            dataType: 'json',
            data: pos,
            success: function (data) {
                console.log(data);
                {#var span = '<span></span>';#}
                if (data == 200) {
                    alert('注册成功')
                }


                for (info in data) {
                    console.log('222');
                    if (info == 'name') {
                        $('#name_box').text(data[info]);
                        console.log('333')


                    }
                    if (info == 'pwd') {
                        $('#pwd_box').text(data[info]);
                        console.log('333')


                    }
                    if (info == 're_pwd') {
                        $('#re_pwd_box').text(data[info]);
                        console.log('333')


                    }
                    if (info == 'email') {
                        $('#email_box').text(data[info]);
                        console.log('333')


                    }
                    if (info == '__all__') {
                        $('#btn_box').text(data[info]);
                        console.log('333')


                    }

                }


            }


        })

    });
    $('#id_name').blur(function () {
        var user_name = {'name':$('#id_name').val()};
        $.ajax({
            url: '/form1/',
            type: 'post',
            contentType: 'application/json',
            dataType: 'json',
            data: JSON.stringify(user_name),
            success: function (data) {
                 $('#name_box').text(data['name']);

            }
        })

    })


</script>
</html>