针对Form提交的数据进行验证html
后端返回给前端错误信息前端
刷新页面,模板对象内容值丰富(参数),(点击提交)刷新页面后值和报错信息都有python
后端自动在前端生成html,保留前端信息jquery
注:测试时,要打开控制台修改自动生成的邮箱input的type="text"(修改掉高级浏览器的cream)ajax
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>Django的Form表单验证</h1> <form action="/login/" method="post"> <!-- 自动生成Html标签,并记录上一次输入的值 --> <p>用户ID:{{ oo.userID }} <span>{{ oo.errors.userID.0 }}</span></p> <p>email:{{ oo.userEmail }} <span>{{ oo.errors.userEmail.0 }}</span></p> <p>密码:<input type="text"></p> <!-- 动态数据生成 <p>用户ID:<input type="text" name="userID" placeholder="请输入用户ID"> <span>{{ oo.errors.userID.0 }}</span></p> <p>email:<input type="text" name="userEmail" placeholder="请输入邮箱地址"> <span>{{ oo.errors.userEmail.0 }}</span></p> <p>密码:<input type="text"></p> --> <p><input type="submit" value="提交"></p> </form> </body> </html>
from django.shortcuts import render,redirect from django import forms from django.forms.utils import ErrorList # Create your views here. class loginForm(forms.Form): userID = forms.CharField(min_length=6,error_messages={"required":"用户ID不能为空", "min_length":"用户名长度不能小于6"}) userEmail = forms.EmailField(error_messages={"required":"邮箱不能为空","invalid":"邮箱格式错误"}) def login(request): if request.method == "GET": obj = loginForm() #默认GET,就不须要添加request.Post参数 #obj = loginForm({"userID":456,"userEmail":789}) #记录的上一次输入的值 return render(request,"login.html",{'oo':obj}) elif request.method == "POST": obj = loginForm(request.POST) status = obj.is_valid() print(status) if status: pad = obj.clean() print(pad) else: #error_obj = obj.errors.as_json() #字典形式输出(默认是ul li形式输出) #error_obj = obj.errors #ul li形式输出 # print(error_obj) # print(error_obj['userID'],type(error_obj['userID'])) # print(error_obj['userID'][0],type(error_obj['userID'][0])) # print(error_obj['userEmail'],type(error_obj['userEmail'])) # print(error_obj['userEmail'][0],type(error_obj['userEmail'][0])) print(obj.errors['userID'][0], type(obj.errors['userID'][0])) print(obj.errors['userEmail'][0], type(obj.errors['userEmail'][0])) return render(request,"login.html",{'oo':obj})
注:isinstance() 函数来判断一个对象是不是一个已知的类型,相似 type()。django
1.isinstance()与type()区别:json
type()不会认为子类是一种父类类型不考虑继承关系。后端
isinstance()会认为子类是一种父类类型,考虑继承关系。数组
判段两个类型是否相同时要清楚是否须要考虑继承关系,不考虑继承就用type()判断,须要考虑就用isinstance()判断。浏览器
2.ValidationError类型的数据在python中不支持json.dumps()序列化,因此须要自定义序列化类型建立cls=...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/jquery-2.1.4.min.js"></script> <style> .error-msg{ color: red; font-size: 12px; } </style> </head> <body> <h1>Django的Form表单验证</h1> <form id="act"> <p>用户ID:<input type="text" name="userID" placeholder="请输入用户ID"> </p> <p>email:<input type="text" name="userEmail" placeholder="请输入邮箱地址"> </p> <p>密码:<input type="text"></p> <input type="button" id="ajax_button" value="提交"> </form> <script> $(function(){ $("#ajax_button").click(function(){ //var userID = $('form input[name="userID"]').val(); //var userEmail = $('form input[name="userEmail"]').val(); //var act = $("#act").serialize(); //console.log(userID,userEmail,act); $.ajax({ url:"/logins/", type:"POST", data:$('#act').serialize(), success:function(arg){ $('.error-msg').remove(); var v1 = JSON.parse(arg); console.log(v1); if(v1.status){ var error_obj = v1.error; $.each(error_obj,function(k,v){ // k: user 或 email // v: [{}{}{},] var tag = document.createElement('span'); tag.className = 'error-msg'; tag.innerHTML = v[0].message; $("input[name='"+k+"']").after(tag); }) }else{ location.href = "/logins/" } } }) }); }); </script> <!--注:$.each(data,function(k,v){})这个方法是jQuery的通用遍历方法,它能够遍历数组、json对象以及dom元 素。遍历数组时,回调函数的第一个参数为遍历的下标,第二个为遍历的值,记做$.each(data,function(i,v){});--> </body> </html>
import json class loginForm(forms.Form): userID = forms.CharField(min_length=6,error_messages={"required":"用户ID不能为空", "min_length":"用户名长度不能小于6"}) userEmail = forms.EmailField(error_messages={"required":"邮箱不能为空","invalid":"邮箱格式错误"}) def logins(request): if request.method == "GET": return render(request,"logins.html") elif request.method == "POST": ret = {"status":True,"error":None,"data":None} obj = loginForm(request.POST) if obj.is_valid(): print(obj.clean()) else: #两次反序列化 # ret_str = obj.errors.as_json() #ret_str是一个字符串 # ret["status"] = False # ret["error"] = ret_str #一次反序列化 ret["status"] = False ret["error"] = obj.errors.as_data() #字典类型 #print(type(obj.errors.as_data())) print(ret["error"]) #{'userID': [ValidationError(['用户名长度不能小于6'])], 'userEmail': [ValidationError(['邮箱格式错误'])]} print(ret["error"]['userID']) #[ValidationError(['用户名长度不能小于6'])] return HttpResponse(json.dumps(ret,cls=JsonCustomEncoder)) from django.core.validators import ValidationError class JsonCustomEncoder(json.JSONEncoder): def default(self,field): if isinstance(field,ValidationError): #判断是否为相同类型 return {'code':field.code,'message':field.message} else: return json.JSONEncoder.default(self,field)