forms组件
-forms是什么?
就是一个类,可以校验字段(前台传过来的字段)
-怎么用:
-校验字段功能:
-先写一个类,继承Form
from django.shortcuts import render, HttpResponse
from django import forms
# 写一个类,要校验那些字段,就是类的属性
class MyForm(forms.Form):
# 定义一个属性,可以用来校验字符串类型
# 限制最大长度是8,最小长度是3
name=forms.CharField(max_length=8,min_length=3)
pwd=forms.CharField(max_length=8,min_length=3,required=True)
# 校验是否是邮箱格式
email=forms.EmailField()
-使用:
#实例化产生对象,传入要校验的数据(字典)
myform=MyForm(request.POST)
# is_valid如果是true表示校验成功,反之,校验失败
if myform.is_valid():
# 校验通过的数据
print(myform.cleaned_data)
return HttpResponse('校验成功')
else:
print(myform.cleaned_data)
#校验失败的信息
print(myform.errors)
-注意:校验的字段,可以多,但是不能少
-渲染模板
-第一中方式:(灵活性最高)
<form action="" method="post" >
<p>用户名: {{ myform.name }}</p>
<p>密码: {{ myform.pwd }}</p>
<p>邮箱: {{ myform.email }}</p>
<input type="submit" value="提交">
</form>
-第二种方式:for循环form对象(用的比较多):
<form action="" method="post" >
{% for foo in myform %}
<p>{{ foo.label }}:{{ foo }}</p>
{% endfor %}
<input type="submit" value="提交">
</form>
-第三种方式(不建议用):
<form action="" method="post" >
{# {{ myform.as_p }}#}
{{ myform.as_ul }}
<input type="submit" value="提交">
</form>
-渲染错误信息
- myforms有errors
-属性(name)也有errors
-错误信息,变成中文:
- error_messages={'max_length': '最长是8', 'min_length': '最短是3', 'required': '这个必须填','invalid': '不符合邮箱格式'}
-给input标签指定样式,指定格式:
-widget=widgets.TextInput(attrs={'class':'form-control'})
-模板,渲染错误信息:<span>{{ myform.name.errors.0 }}</span>
-局部钩子校验
-定义一个函数,名字叫:clean_字段名字,内部,取出该字段,进行校验,如果通过,将该字段返回,如果失败,抛异常(ValidationError)
- def clean_name(self):
# self:当前form对象
name = self.cleaned_data.get('name')
if name.startswith('sb'):
# 失败,抛异常
raise ValidationError('不能以傻逼开头')
# 正常,把name返回
return name
-全局钩子
#重写clean方法
def clean(self):
#程序能走到该函数,前面校验已经通过了,所以可以从cleaned_data中取出密码和确认密码
pwd=self.cleaned_data.get('pwd')
re_pwd=self.cleaned_data.get('re_pwd')
#进行自己的校验
if pwd==re_pwd:
#通过,直接返回cleaned_data
return self.cleaned_data
else:
#失败,抛异常(ValidationError)
raise ValidationError('两次密码不一致'
---------------------------------views代码--------------------------------------------------
from django.shortcuts import render, HttpResponse,redirect
from django.http import HttpRequest, JsonResponse
# Create your views here.
# ---------------------2018/11/21-----------------------
from django import forms
from django.core.exceptions import ValidationError
from django.forms import widgets
from app01 import models
class MyForm(forms.Form):
name = forms.CharField(max_length=8, min_length=3, label='用户名', error_messages={
'max_length': '最长是8个字符',
'min_length': '最短是3个字符',
'required': '这个必须填'
},widget=widgets.TextInput(attrs={'class': 'form-control'}))
pwd = forms.CharField( max_length=8, min_length=3, required=True, label='密码',
error_messages={
'max_length': '最长是8个字符',
'min_length': '最短是3个字符',
'required': '这个必须填'
},widget=widgets.PasswordInput(attrs={'class': 'form-control'}))
re_pwd = forms.CharField( max_length=8, min_length=3, required=True, label='请再次输入密码',
error_messages={
'max_length': '最长是8个字符',
'min_length': '最短是3个字符',
'required': '这个必须填'
},widget=widgets.PasswordInput(attrs={'class': 'form-control'}))
email = forms.EmailField(label='邮箱', error_messages={
'required': '这个必须填',
'invalid': '不符合邮箱格式'
},widget=widgets.TextInput(attrs={'class': 'form-control'}))
def clean_name(self):
name = self.cleaned_data.get('name')
name_list = models.Book.objects.all()
for user_name in name_list:
if user_name.name == name:
raise ValidationError('用户已存在')
return name
def clean(self):
pwd = self.cleaned_data.get('pwd')
re_pwd = self.cleaned_data.get('re_pwd')
if pwd == re_pwd:
return self.cleaned_data
else:
raise ValidationError('两次密码输入不一致')
def form(request):
if request.method == 'GET':
myform = MyForm()
print(request.GET)
return render(request,'form1.html',locals())
elif request.method == 'POST':
# print(request.POST)
# print(request.body)
print('在这---------------------------------------')
# print(request.body)
user_info = json.loads(request.body.decode('utf-8'))
print(user_info)
myform = MyForm(user_info)
# myform = MyForm(request.POST)
# print(myform)
# return HttpResponse()
# print(myform)
if myform.is_valid():
print('66666')
data = myform.cleaned_data
print(data)
return JsonResponse(200,safe=False)
# return HttpResponse(data)
else:
# all_error = myform.errors.get('__all__')
# print('pppppp')
# print(myform.errors)
# print(all_error)
# if all_error:
# all_error = all_error[0]
return JsonResponse(myform.errors)
--------------------------------前端代码------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="col-md-4 col-md-offset-4">
<form novalidate class="form-horizontal">
<div>
{% for foo in myform %}
{# <p>{{ foo.label }} : {{ foo }} <span>{{ foo.errors.0 }}</span></p>#}
<p>{{ foo.label }} : {{ foo }} <span id="{{ foo.name }}_box" style="color: red"></span></p>
{% endfor %}
{# <p>#}
{# <button id="btn" class="btn btn-primary">提交</button>#}
{# <span>{{ all_error }}</span>#}
{# </p>#}
</div>
</form>
<button id="btn" class="btn btn-primary">提交</button>
<span id="btn_box"></span>
</div>
</body>
<script>
$('#btn').click(function () {
var user_info = {
'name': $('#id_name').val(),
'pwd': $('#id_pwd').val(),
're_pwd': $('#id_re_pwd').val(),
'email': $('#id_email').val()
};
var pos = JSON.stringify(user_info);
$.ajax({
url: '/form1/',
type: 'post',
contentType: 'application/json',
dataType: 'json',
data: pos,
success: function (data) {
console.log(data);
{#var span = '<span></span>';#}
if (data == 200) {
alert('注册成功')
}
for (info in data) {
console.log('222');
if (info == 'name') {
$('#name_box').text(data[info]);
console.log('333')
}
if (info == 'pwd') {
$('#pwd_box').text(data[info]);
console.log('333')
}
if (info == 're_pwd') {
$('#re_pwd_box').text(data[info]);
console.log('333')
}
if (info == 'email') {
$('#email_box').text(data[info]);
console.log('333')
}
if (info == '__all__') {
$('#btn_box').text(data[info]);
console.log('333')
}
}
}
})
});
$('#id_name').blur(function () {
var user_name = {'name':$('#id_name').val()};
$.ajax({
url: '/form1/',
type: 'post',
contentType: 'application/json',
dataType: 'json',
data: JSON.stringify(user_name),
success: function (data) {
$('#name_box').text(data['name']);
}
})
})
</script>
</html>
