首先引用 jQuery

 <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.4.1.min.js"></script>

寫一個簡單的表單

    <form id="f1" method="POST" action="/form_login/">
                         {% csrf_token %}
            <p>使用者：<input id="title_1" type="text" name="username"/></p
 
>
            <p>密碼：<input type="password" name="password"/></p>
            <p><input type="submit" name="提交">{{message}}</p>
            <a onclick="abc()">提交</a>    {# 點選連結到JavaScript函式 #}
        </form>

相關檢視函式

 1 from django.forms import
 
 Form,fields,widgets
 2 class FormLogin(Form):
 3 
 4        username=fields.CharField(min_length=6,max_length=18,required=True,
 5                                  error_messages={
 6                                      'required':'使用者名稱不能為空',
 7                                      'min_length':'
 
最小長度為6',
 8                                      'max_length':'最大長度18',
 9                                  }
10                                  )
11        #裡面就包含了正則驗證：不能為空、6-18
12        #這個要html裡面的name屬性一樣
13        #寫幾個就驗證幾個規則
14        password = fields.CharField(min_length=6, max_length=18, required=True,
15                                    error_messages={
16                                        'required': '密碼不能為空',
17                                        'min_length': '最小長度為6',
18                                        'max_length': '最大長度18',
19                                    }
20                                    )
21        # t1 = fields.IntegerField  # 數字正則表示式
22        # t2 = fields.EmailField()  # 郵箱正則表示式
23        # email=fields.GenericIPAddressField()  #IP正則表示式

def form_login_ajax(request):
        import json
        ret={'status':True, 'msg':None} #有個狀態，方便後面判斷
        obj = FormLogin(request.POST)
        if obj.is_valid():  # 去匹配
            print(obj.cleaned_data)  # 正確的資訊
            #return redirect('http://www.baidu.com')
        else:
            print(obj.errors)

            # v=json.dumps(obj.errors,ensure_ascii=False)#通過json 對它序列化
            # print(v)
            ret['status']=False
            ret['msg']=obj.errors   #obj.errors是個字典
        v=json.dumps(ret,ensure_ascii=False)  #為了能打印出來
        print(v)
        return HttpResponse(v)  #也能返回render（本質還是HttpResponse），但是這裡返回這個比較好，弄個json.domp字典返回最好

        # return render(request, 'form_login.html', {'obj': obj, 'user': user, 'pwd': pwd})
        #完成驗證和提示錯誤，但是無法保留Form表單上次輸入內容

傳送Ajax請求和接受檢視函式返回的資料並且處理

 <script>

    function abc(){
            $('.c1').remove();  //(jQuery  類選擇器)
           $.ajax(
             {
                url:'/form_login_ajax/',
                type:'POST',
                data:$('#f1').serialize(),

                dataType:"JSON",   //將序列化的json轉化為物件
                success:function(data){
                   console.log(data);
                   console.log(data.status);   //status是後臺傳過來的字典的key
                   if(data.status){  //若是提交成功的話
                       alert('提交成功')
                       $("#f1").hide();//皮一下，輸入成功後，輸入框消失(jQuery  id選擇器)
                   }else{
                     $.each(data.msg,function(index,value){   //對data.msg進行迴圈
                        console.log(index,value);             //取其index(key),value
                        var tag=document.createElement('span');  //建立一個名為tag的span標籤
                        tag.innerHTML=value[0];    //取value第一個值
                        console.log(value[0]);
                        console.log(tag);
                        tag.className='c1';  //給標籤加一個樣式  目的：等到下次來的時候給它刪除（避免累加提示錯誤）
                        $('#f1').find('input[name="'+index+'"]').after(tag);  //input[name=" user "]'   ,不能有多餘的空格
                        //找到id為f1的表格，下面找到input name=x，加入tag標籤
                        })
                   }

                                   }

                })
              }

 </script>

ps:

問題待補充:

jQuery  三大選擇器  除了能   .remove()    .hide()  還能.什麼，哪裡可以查到相關的全部