- 用戶數據提交進行驗證
    - Form提交：提交後，內容會清空，會刷新瀏覽器
        1、通過寫類（繼承Forms）
            字段名 == xx.filed（）這個字段本質就是驗證正則，正則表達式
            字段名 == xx.filed（）這個字段本質就是驗證正則，正則表達式
            字段名 == xx.filed（）這個字段本質就是驗證正則，正則表達式
        2、obj = logForm(request.post)
        3、obj.is_valid()
        4、obj.cleaned_data
        5、obj.errors
        - Ajax：提交後，會保留上次內容，不會刷新瀏覽器（如需需要手動操作）
- 保留上次內容
 

is_valid的原理

from django.forms import Form,fields
class LoginFrom(Form):
    username = fields.CharField(min_length=6,max_length=12,required=True,
                                error_messages={
                                    ‘required‘:‘用戶不能為空‘,
                                    ‘min_length‘:‘輸入的太短了‘,
                                    ‘max_length‘:‘太長了‘,
                                },
                                )
    password1 = fields.CharField(max_length=8,required=True)
    password2 = fields.CharField(max_length=8,required=True)
def login(request):
    if request.method == "GET":
        return render(request,‘login.html‘)
    else:
        obj = LoginFrom(request.POST)
        if obj.is_valid():
 

下面介紹下 is_valid的原理
我們知道username和password1和password2這些字段都是正則表達式，當LoginForm實例化成功，其實就是在把裏面的username和password字段再做

self.field = {
    ‘username’：正則表達式（fields.CharField(min_length=6,max_length=12,required=Tru），
    ‘password1’：正則表達式，
    xxx：xxx
}

當做了上面的步驟後，然後就是開始循環這個self.field。

flag= True
errors
cleaned_data
for k,v in self.fields.items():
    #k就是username，v就是正則表達式
    input_value = request.post.get(k)#因為這裏設置的字段名字是和前端的name是一樣的
    正則和表達式和input_value
    flag  = False
return flag
 

通過上面的流程 我們就能判斷得到is_valid()是否為真或者假

Form和Ajax的提交驗證

ajax提交數據後，填入的內容不會丟失，頁面不會刷新，

<form id="fid" action="/login.html/" method="post">
    <p><input type="text" name="username">用戶名</p>{{ obj.errors.username.0 }}
    <p><input type="password" name="password">密碼</p>{{ obj.errors.username.0 }}
{#    <p><input type="password" name="password2">確認密碼</p>{{ error }}#}
    <p><input type="submit" value="提交"></p>
{#    <p><input type="submit" onclick="ajaxclick()">ajax提交</p>#}
    <a onclick="ajaxclick();">ajax提交</a>
</form>
<script src="/static/jquery-1.12.4.js"></script>
<script>
    function ajaxclick() {
        $.ajax({
            url:‘/ajaxlogin/‘,
            type:‘POST‘,
            data:$(‘#fid‘).serialize(),
            success:function (args) {
                console.log(args);
            }
        })
    }
</script>

class LoginFrom(Form):
    username = fields.CharField(min_length=6,max_length=12,required=True,
                                error_messages={
                                    ‘required‘:‘用戶不能為空‘,
                                    ‘min_length‘:‘輸入的太短了‘,
                                    ‘max_length‘:‘太長了‘,
                                },
                                )
    password = fields.CharField(max_length=6,required=True)

def login(request):
    if request.method == "GET":
        return render(request,‘login.html‘)
    else:
        obj = LoginFrom(request.POST)
        if obj.is_valid():
            return redirect(‘http://www.baidu.com‘)
            # pp1 = obj.cleaned_data[‘password1‘]
            # # pp2 = obj.cleaned_data[‘password2‘]
            # if pp1 != pp2:
            #     return render(request,‘login.html‘,{‘error‘:‘兩次內容不一樣‘})
            # else:
            #     print(obj.cleaned_data)#字典類型
            #     return redirect(‘http://www.baidu.com‘)
        else:
            return render(request,‘login.html‘,{‘obj‘:obj})

def ajaxlogin(request):
    obj = LoginFrom(request.POST)
    if obj.is_valid():
        print(obj.cleaned_data)
    else:
        print(obj.errors)
    return HttpResponse(‘......‘)#這裏也可以返回render，因為render代碼最後還是httpresponse返回的，一般這裏是返回一個json.doumps的數據

ajax提交顯示錯誤信息

obj.errors，是一個對象，我們要想把這個對象裏面的數據傳到前端，好的方法是通過json轉化成字典，然後就可以傳到前端。根據這個思路我們要導入json模塊，優化有設置一個字典，方便前端查找

def ajaxlogin(request):
    import json
    ret = {‘status‘:True,‘msg‘:None}#設置了一個字典類型的數據ret
    obj = LoginFrom(request.POST)
    if obj.is_valid():
        print(obj.cleaned_data)
    else:
        ret[‘status‘] = False
        ret[‘msg‘] = obj.errors#這是一個對象
        print(obj.errors)
    v = json.dumps(ret)#轉換為字典類型
    return HttpResponse(v)

通過後端的傳給來的v數據，我們前端需要在success後，執行一些把錯誤信息提取出來，然後顯示到頁面上

<script>
    function ajaxclick() {
        $(‘.c1‘).remove();
        $.ajax({
            url:‘/ajaxlogin/‘,
            type:‘POST‘,
            data:$(‘#fid‘).serialize(),
            dataType:‘JSON‘,#自動解壓json格式，要添加這個參數
            success:function (args) {
                console.log(args);
                if (args.status){#args就是那邊傳過來的v，由於裏面包含了字段status和其他字段

                }else {
                    $.each(args.msg,function (index,value) {#通過循環msg字典，
                        var tag = document.createElement(‘span‘);
                        tag.className=‘c1‘;#添加一個class，為了上面的清除數據，如果沒有這一行和上面的一行remove，發現報錯信息會一直在後面顯示，是一個累加的形式
                        tag.innerHTML = value[0];#不管有幾個，還是取第一個值
                        $("#fid").find(‘input[name="‘+ index +‘"]‘).after(tag);#這裏使用到了拼接字符串
                    })
                }
            }
        })
    }
</script>

前端，msg的樣式

django 的form組件(驗證原理的流程）--2