前端登陆界面（重点是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,HttpResponse
from django.forms import Form
from django.forms import fields
from django.forms import widgets
class 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})
原文地址：https://www.cnblogs.com/weigege2015/p/8601162.html
时间： 2024-11-08 23:38:43