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/[email protected]/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>