前端登陆界面（重点是js操作--接收到后台发来的错误信息怎么在页面显示出来）
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title></title></head><body> ???<h1>用户登录</h1> ???<form id="f1" action="/login/" method="POST"> ???????{% csrf_token %} ???????<p> ???????????<input type="text" name="user" />{{ obj.errors.user.0 }} ???????</p> ???????<p> ???????????<input type="password" name="pwd" />{{ obj.errors.pwd.0 }} ???????</p> ???????<input type="submit" value="提交" /> ???????<a onclick="submitForm();">提交</a> ???</form> ???<script src="/static/jquery-1.12.4.js"></script> ???<script> ???????function submitForm(){ ???????????$(‘.c1‘).remove(); ???????????$.ajax({ ???????????????url: ‘/ajax_login/‘, ???????????????type: ‘POST‘, ???????????????data: $(‘#f1‘).serialize(),// user=alex&pwd=456&csrftoen=dfdf ???????????????dataType:"JSON", ???????????????success:function(arg){ ???????????????????console.log(arg); ???????????????????if(arg.status){ ???????????????????}else{ ???????????????????????$.each(arg.msg,function(index,value){ ???????????????????????????console.log(index,value); ???????????????????????????var tag = document.createElement(‘span‘); ???????????????????????????tag.innerHTML = value[0]; ???????????????????????????tag.className = ‘c1‘; ???????????????????????????$(‘#f1‘).find(‘input[name="‘+ index +‘"]‘).after(tag); ???????????????????????}) ???????????????????} ???????????????} ???????????}) ???????} ???</script></body></html>views.py中接收数据并作验证，然后把错误信息返回给前端
from django.shortcuts import render,redirect,HttpResponsefrom django.forms import Formfrom django.forms import fieldsfrom django.forms import widgetsclass LoginForm(Form): ???user = fields.CharField(required=True) ???pwd = fields.CharField(min_length=18)def login(request): ???if request.method == ‘GET‘: ???????return render(request,‘login.html‘) ???else: ???????obj = LoginForm(request.POST) ???????if obj.is_valid(): ???????????print(obj.cleaned_data) ???????????return redirect(‘http://www.baidu.com‘) ???????return render(request,‘login.html‘,{‘obj‘: obj})ajax接收并发送数据def ajax_login(request): ????import json ???ret = {‘status‘: True,‘msg‘: None} ???obj = LoginForm(request.POST) ???if obj.is_valid(): ???????print(obj.cleaned_data) ???else: ???????# print(obj.errors) # obj.errors对象 ???????ret[‘status‘] = False ???????ret[‘msg‘] = obj.errors ???v = json.dumps(ret) ???return HttpResponse(v)## class TestForm(Form):# ????t1 = fields.CharField(# ????????required=True,# ????????max_length=8,# ????????min_length=2,# ????????error_messages={# ????????????‘required‘: ‘不能为空‘,# ????????????‘max_length‘: ‘太长‘,# ????????????‘min_length‘: ‘太短‘,# ????????}# ????)# ????t2 = fields.IntegerField(# ????????min_value=10,# ????????max_value=1000,# ????????error_messages={# ????????????‘required‘: ‘t2不能为空‘,# ????????????‘invalid‘: ‘t2格式错误，必须是数字‘,# ????????????‘min_value‘: ‘必须大于10‘,# ????????????‘max_value‘: ‘必须小于1000‘,# ????????},# ????)# ????t3 = fields.EmailField(# ????????error_messages={# ????????????‘required‘: ‘t3不能为空‘,# ????????????‘invalid‘: ‘t3格式错误，必须是邮箱格式‘,# ????????}# ????)class TestForm(Form): ???t1 = fields.CharField(required=True,max_length=8,min_length=2, ???????error_messages={ ???????????‘required‘: ‘不能为空‘, ???????????‘max_length‘: ‘太长‘, ???????????‘min_length‘: ‘太短‘, ???????} ???) ???t2 = fields.EmailField()def test(request): ???if request.method == "GET": ???????obj = TestForm() ???????return render(request,‘test.html‘,{‘obj‘: obj}) ???else: ???????obj = TestForm(request.POST) ???????if obj.is_valid(): ???????????print(obj.cleaned_data) ???????else: ???????????print(obj.errors) ???????return render(request,‘test.html‘,{‘obj‘:obj})class RegiterForm(Form): ???user = fields.CharField(min_length=8) ???email = fields.EmailField() ???password = fields.CharField() ???phone = fields.RegexField(‘139\d+‘)def register(request): ???if request.method == ‘GET‘: ???????obj = RegiterForm() ???????return render(request,‘register.html‘,{‘obj‘:obj}) ???else: ???????obj = RegiterForm(request.POST) ???????if obj.is_valid(): ???????????print(obj.cleaned_data) ???????else: ???????????print(obj.errors) ???????return render(request,‘register.html‘,{‘obj‘:obj})Form组件验证之ajax提交数据并显示错误信息
原文地址：https://www.cnblogs.com/weigege2015/p/8601162.html