前言
Django中完成表单验证,常用的有两种方法:
一种是通过HTML + JS + Ajax实现。
另一种是通过Django自身的forms模块来生成相应个HTML标签来完成表单验证。这是本节着重讲的地方
第一种方法:html + ajax实现基本的login页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.error-msg{
color: red;
}
</style>
</head>
<body>
<div>
<div>
<input type="text" name="user" />
</div>
<div>
<input type="password" name="pwd" />
</div>
<div>
<input type="text" name="num" />
</div>
<div>
<input type="text" name="phone" />
</div>
<input type="button" value="提交" οnclick="DoSubmit();" />
</div>
<script src="/static/jquery-2.1.4.min.js"></script>
<script>
function DoSubmit(){
var input_dict = {};
$('input').each(function(){
var v = $(this).val();
var n = $(this).attr('name');
input_dict[n] = v;
});
console.log(input_dict);
$('.error-msg').remove();
$.ajax({
url: '/login/',
type: 'POST',
data: input_dict,
dataType: 'json',
success: function (result) {
if(result.status){
location.href = '/index/';
}else{
$.each(result.message, function (k,v) {
console.log(k,v[0].message);
// <span class="error-msg">错误信息</span>
var tag = document.createElement('span');
tag.className = 'error-msg';
tag.innerText = v[0].message;
// input[name="user"]
$('input[name="' + k + '"]').after(tag);
})
}
},
error: function () {
}
})
}
</script>
</body>
</html>
from django.shortcuts import render,HttpResponse
# Create your views here.
from django import forms
from django.core.exceptions import ValidationError
import re
def mobile_validate(value):
mobile_re = re.compile(r'^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$')
if not mobile_re.match(value):
raise ValidationError('手机号码格式错误')
class LoginForm(forms.Form):
user = forms.CharField(required=True, error_messages={'required': '用户名不能为空.'})
pwd = forms.CharField(required=True,
min_length=6,
max_length=10,
error_messages={'required': '密码不能为空.', 'min_length': "至少6位"})
num = forms.IntegerField(error_messages={'required': '数字不能空.','invalid': '必须输入数字'})
phone = forms.CharField(validators=[mobile_validate, ],)
import json
def login(request):
if request.method == 'POST':
result = {'status': False, 'message': None}
obj = LoginForm(request.POST)
ret = obj.is_valid()
if ret:
print(obj.clean())
result['status'] = True
else:
from django.forms.utils import ErrorDict
#print(type(obj.errors),obj.errors.as_json())
error_str = obj.errors.as_json()
result['message'] = json.loads(error_str)
return HttpResponse(json.dumps(result))
return render(request, 'login.html')
这里边views中,已经用到了django自带的forms模块。在不用这个模块之前,我们对于用户输入进行判断,需要一堆的if..if...if语句来进行,但是用了这个模块之后,仅需要在定义好LoginForm类中每个字段的属性后,通过obj = LoginForm(request.POST)和ret = obj.is_valid()两步,就可以完成对于用户输入信息的验证。ret会返回验证是否全部通过。全部通过则为True,只要有一条表单信息验证不通过,则为False。
这里需要关注的知识点是:obj.clean() 是输出用户post的正确信息,是一个dict,obj.errors是输出用户post的错误信息,是一个通过ul li显示的信息,这样不方便查看。可以通过obj.errors.as_json()来将错误信息以json形式展示,用error_str = obj.errors.as_json() 和 result['message'] = json.loads(error_str)来完成错误信息收集。
另外定义表单验证规则LoginForm类时,字段名需要等于html中name值
补充知识点:在定义的LoginForm中,定义的pwd字段是这样定义的
pwd = forms.CharField(required=True,
min_length=6,
max_length=10,
error_messages={'required': '密码不能为空.', 'min_length': "至少6位"})
其中error_messages属性是用来定义错误信息的展示的。解释为:如果required验证不通过,则提示'密码不能为空',min_length验证不通过,则错误信息为'至少6位'。扩展'invalid': '必须输入数字'
第二种方法:利用forms模块生成html标签
forms能解决的2个问题:
问题1: 如果使用html自带的form标签来进行提交,如果提交的数据有错误,会清空表单中的全部数据,如果表单项较多,对用户非常不友好。那么forms模块就能解决这个问题。
问题2: 使用html的form标签提交数据,需要input标签的name属性必须和定义的class类的属性一致。而使用django forms模块,则不需要考虑这个问题。
废话不多说,直接贴代码
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.error-msg{
color: red;
}
</style>
</head>
<body>
<form action="/login/" method="POST">
<div>
<div>
{{ obj1.user }}
{% if obj1.errors.user %}
<span class="error-msg">{{ obj1.errors.user.0 }}</span>
{% endif %}
</div>
<div>
{{ obj1.pwd }}
<span class="error-msg">{{ obj1.errors.pwd.0 }}</span>
</div>
<div>
{{ obj1.num }}
<span class="error-msg">{{ obj1.errors.num.0 }}</span>
</div>
<div>
{{ obj1.phone }}
<span class="error-msg">{{ obj1.errors.phone.0 }}</span>
</div>
<div>
{{ obj1.test }}
<span class="error-msg">{{ obj1.errors.test.0 }}</span>
</div>
<input type="submit" value="提交" />
</div>
</form>
</body>
</html>
后端代码
from django.shortcuts import render,HttpResponse,redirect
# Create your views here.
from django import forms
from django.core.exceptions import ValidationError
import re
def mobile_validate(value):
mobile_re = re.compile(r'^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$')
if not mobile_re.match(value):
raise ValidationError('手机号码格式错误')
class LoginForm(forms.Form):
user = forms.CharField(required=True, error_messages={'required': '用户名不能为空.'})
pwd = forms.CharField(required=True,
min_length=6,
max_length=10,
error_messages={'required': '密码不能为空.', 'min_length': "至少6位"})
num = forms.IntegerField(error_messages={'required': '数字不能空.','invalid': '必须输入数字'})
phone = forms.CharField(validators=[mobile_validate, ],)
#test = forms.CharField(widget=forms.Textarea(attrs={'class': 'c1'}))
test_choices = (
(0, '上海'),
(1, '背景'),
)
test = forms.IntegerField(widget=forms.Select(choices=test_choices))
def login(request):
if request.POST:
objPost = LoginForm(request.POST)
ret = objPost.is_valid()
if ret:
print(objPost.clean())
else:
from django.forms.utils import ErrorDict
#print(type(obj.errors),obj.errors.as_json())
# obj1.errors
pass
return render(request, 'login.html',{'obj1': objPost})
else:
objGet = LoginForm()
return render(request, 'login.html',{'obj1': objGet})
from django.conf.urls import url
from app01 import views
urlpatterns = [
url(r'^login/', views.login),
]
urls.py
知识点:如何生成自定义的标签类型
forms默认帮我们生成的是INPUT标签,同时也支持生成其他标签。在源代码中,可以看到支持很多的Field类型
上边的一堆类可以看出,继承Field的类,可以用作生成标签,这些类都写在fields.py文件中。而forms.IntegerField(widget=forms.Select(choices=test_choices)中的widget字段中的类,都需要继承自Widget才可以,这些类都写在widgets.py中。
比如,如果生成下拉框可以这么写:
test_choices = (
(0, '上海'),
(1, '背景'),
)
test = forms.IntegerField(widget=forms.Select(choices=test_choices))
知识点:如何给生成的标签自定义属性
test = forms.CharField(widget=forms.Textarea(<strong>attrs</strong>={'class': 'c1'}))