Django forms组件

Posted layerluo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Django forms组件相关的知识,希望对你有一定的参考价值。

校验字段

模板文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="post">

    <p>用户名: <input type="text" name="name"></p>
{#    <p>密码: <input type="text" name="pwd"></p>#}
    <p>确认密码: <input type="text" name="re_pwd"></p>
    <p>邮箱: <input type="text" name="email"></p>
    <input type="submit" value="提交">

</form>
</body>
</html>

 视图文件

from django import forms
from django.forms import widgets

class MyForm(forms.Form):
# 定义一个属性,可以用来校验字符串类型
# 限制最大长度是8,最小长度是3
name = forms.CharField(max_length=8, min_length=3, label=‘用户名‘,
error_messages={‘max_length‘: ‘最长是8‘, ‘min_length‘: ‘最短是3‘, ‘required‘: ‘这个必须填‘},)
pwd = forms.CharField(max_length=8, min_length=3, required=True, label=‘密码‘,
error_messages={‘max_length‘: ‘最长是8‘, ‘min_length‘: ‘最短是3‘, ‘required‘: ‘这个必须填‘},)
re_pwd = forms.CharField(max_length=8, min_length=3, required=True, label=‘确认密码‘,
error_messages={‘max_length‘: ‘最长是8‘, ‘min_length‘: ‘最短是3‘, ‘required‘: ‘这个必须填‘},)
# 校验是否是邮箱格式
email = forms.EmailField(label=‘邮箱‘, error_messages={‘required‘: ‘这个必须填‘, ‘invalid‘: ‘不符合邮箱格式‘})


数据从前端传过来,校验 要校验的字典,可以多参数,但是不能少 def index_form(request): # 生成对象时(实例化),需要传入要校验的数据(字典) if request.method==‘GET‘: return render(request,‘indxe.html‘) elif request.method==‘POST‘: print(request.POST) 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) print(myform.errors.as_data()) print(type(myform.errors)) from django.forms.utils import ErrorDict return HttpResponse(‘校验失败‘)

 渲染模板

视图文件

from django.forms import widgets
from django.forms import widgets
from django.core.exceptions import ValidationError

 name = forms.CharField(widget=widgets.TextInput(attrs={‘class‘: ‘form-control‘}))
 pwd = forms.CharField(widget=widgets.PasswordInput(attrs={‘class‘: ‘form-control‘}))

widgets 就是用来渲染的

class MyForm(forms.Form):
    # 定义一个属性,可以用来校验字符串类型
    # 限制最大长度是8,最小长度是3
    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())
    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())
    # 校验是否是邮箱格式
    email = forms.EmailField(label=‘邮箱‘, error_messages={‘required‘: ‘这个必须填‘, ‘invalid‘: ‘不符合邮箱格式‘})


渲染模板
def index_form(request):
    # 生成对象时(实例化),需要传入要校验的数据(字典)
    myform=MyForm()
    if request.method==‘GET‘:
        return render(request,‘indxe2.html‘,locals())

 模板文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<hr>
<h1>第一种方式</h1>
<form action="" method="post" >
    <p>用户名: {{ myform.name }}</p>
    <p>密码: {{ myform.pwd }}</p>
    <p>邮箱: {{ myform.email }}</p>
    <input type="submit" value="提交">

</form>
<hr>
<h1>第二种方式(for循环form对象,建议用这种)</h1>
<form action="" method="post" >
    {% for foo in myform %}
        <p>{{ foo.label }}:{{ foo }}</p>
    {% endfor %}

    <input type="submit" value="提交">
</form>
<h1>第三种方式(不建议用)</h1>
<form action="" method="post" >

{#    {{ myform.as_p }}#}
    {{ myform.as_ul }}
    <input type="submit" value="提交">
</form>
</body>
</html>

 渲染错误信息

视图文件

# 第一步:先要继承Form
from django import forms
from django.forms import widgets
from django.core.exceptions import ValidationError


# 写一个类
class MyForm(forms.Form):
    # 定义一个属性,可以用来校验字符串类型
    # 限制最大长度是8,最小长度是3
    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())
    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())
    # 校验是否是邮箱格式
    email = forms.EmailField(label=‘邮箱‘, error_messages={‘required‘: ‘这个必须填‘, ‘invalid‘: ‘不符合邮箱格式‘})

    # aa = forms.CharField(label=‘选择‘, error_messages={‘required‘: ‘这个必须填‘, ‘invalid‘: ‘不符合邮箱格式‘},widget=widgets.CheckboxInput())
    def clean_name(self):
        # self:当前form对象
        name = self.cleaned_data.get(‘name‘)
        if name.startswith(‘sb‘):
            # 失败,抛异常
            raise ValidationError(‘不能以傻逼开头‘)
        # 正常,把name返回
        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(‘两次密码不一致‘)


# 渲染错误信息
from app01 import models
def index_form(request):
    # 生成对象时(实例化),需要传入要校验的数据(字典)
    if request.method == ‘GET‘:
        myform = MyForm()
    elif request.method == ‘POST‘:
        myform = MyForm(request.POST)
        if myform.is_valid():
            print(myform.cleaned_data)

            myform.cleaned_data.pop(‘re_pwd‘)
            models.User.objects.create(**myform.cleaned_data)
            return redirect(‘http://www.baidu.com‘)
        else:
            all_error = myform.errors.get(‘__all__‘)
            if all_error:
                all_error=all_error[0]

    return render(request, ‘indxe3.html‘, locals())

 模板文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <title>Title</title>
</head>
<body>

<h1>第二种方式(for循环form对象,建议用这种)</h1>
<form action="" method="post" novalidate>
    {% for foo in myform %}
        <p>{{ foo.label }}:{{ foo }} <span>{{ foo.errors.0 }}</span></p>
    {% endfor %}

    <input type="submit" value="提交"><span>{{ all_error }}</span>
</form>
</body>
</html>

errors存放着错误信息

 局部钩子

    def clean_name(self):
        # self:当前form对象
        name = self.cleaned_data.get(‘name‘)
        if name.startswith(‘sb‘):
            # 失败,抛异常
            raise ValidationError(‘不能以傻逼开头‘)
        # 正常,把name返回
        return name

clean_name  是拿上面定义的name 返回的信息也是放到 errors字典内 键是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(‘两次密码不一致‘)

全局钩子  错误的信息存放在 errors 字典内的 __all__ 键对应的值内

 

技术分享图片
from django.shortcuts import render,HttpResponse
import json
from django.http import JsonResponse
# Create your views here.
from django import forms
from django.forms import widgets
from django.core.exceptions import ValidationError
from app01 import models


class myForm(forms.Form):
    name = forms.CharField(max_length=12, min_length=3, label=用户名,
                           error_messages={max_length: 最长是12, min_length: 最短是3, required: 必填},
                           widget=widgets.TextInput(attrs={class: form-control,id:usr}))
    pwd = forms.CharField(max_length=16, min_length=3, label=密码,
                          error_messages={max_length: 最长16, min_length: 最短是3, required: 必填},
                          widget=widgets.PasswordInput(attrs={class: form-control,id:pwd}))
    re_pwd = forms.CharField(max_length=16, min_length=3, label=再次输入密码,
                             error_messages={max_length: 最长16, min_length: 最短是3, required: 必填},
                             widget=widgets.PasswordInput(attrs={class: form-control,id:pwd2}))
    email = forms.EmailField(label=邮箱,
                             error_messages={required: 必填, invalid: 不符合邮箱格式},
                             widget=widgets.EmailInput(attrs={class: form-control,id:email}))

    def clean_name(self):
        name=self.cleaned_data.get("name")
        # print(name)
        account=models.User.objects.filter(name=name).first()
        if account:
            raise ValidationError(该用户名已存在)
        return name

    def clean(self):
        pwd = self.cleaned_data.get(pwd)
        # print(pwd)
        re_pwd = self.cleaned_data.get(re_pwd)
        if pwd == re_pwd:
            return self.cleaned_data
        else:
            raise ValidationError(两次密码不一致)


def index(request):
    if request.method == GET:
        myform = myForm()
        return render(request, index.html, locals())
    elif request.method == POST:
        # print(request.POST)
        # print(request.body)
        ajax1=json.loads(request.body.decode(utf-8))
        # print(ajax1)
        myform = myForm(ajax1)
        if myform.is_valid():
            data = myform.cleaned_data
            data.pop(re_pwd)
            models.User.objects.create(**data)
            return HttpResponse(注册成功)
        else:
            return JsonResponse(myform.errors)

def index_usr(request):
    print(request.body)
    ajax2 = json.loads(request.body.decode(utf-8))
    print(ajax2)
    myform = myForm(ajax2)
    if myform.is_valid():
        return HttpResponse(json.dumps(可以使用的用户名))
    else:
        return JsonResponse(myform.errors)
注册功能页面(手撸)views层
技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">
    <title>Title</title>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3" id="msg">
            <form action="" method="post" novalidate>
                {% for foo in myform %}
                    <p id="{{ foo.auto_id }}">{{ foo.label }}:{{ foo }}</p>
                {% endfor %}

            </form>
            <button type="submit" id="btn">注册</button>
            <span id="error"></span>
        </div>
    </div>
</div>

</body>
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script>
    $(#btn).click(function () {
        var pos_data = {
            name: $(#usr).val(),
            pwd: $(#pwd).val(),
            re_pwd: $(#pwd2).val(),
            email: $(#email).val()
        };
        var pos = JSON.stringify(pos_data);
        $.ajax({
            url: /index/,
            type: post,
            data: pos,
            contentType: application/json,
            dataType: json,
            success: function (data) {
                for (let i in data) {
                    var error_msg2 = $(<span class="pull-right" style="color: red" id="msg_error" > + data[i] + </span>);
                    if (error_msg2) {
                        $(#msg_error).remove()
                    }
                    $(#id_ + i + ‘‘).append(error_msg2);
                    if (data[__all__]) {
                        var error_msg = $(<span class="pull-right" style="color: red" id="er_pwd2"> + data[__all__] + </span>);
                        if ($(#er_pwd2)) {
                            $(#msg_error).remove()
                            $(#er_pwd2).remove()
                        }
                        $(#id_re_pwd).append(error_msg)
                    } else {
                        $(#er_pwd2).remove()
                    }
                    break;
                }
                alert(data)
            }
        })
    });
    $(#usr).on(blur, function () {
        var pos_data2 = {
            name: $(#usr).val(),
        };
        var pos2 = JSON.stringify(pos_data2);
        $.ajax({
            url: /index_usr/,
            type: post,
            data: pos2,
            contentType: application/json,
            dataType: json,
            success: function (data) {
                console.log(data)
                li=name
                if (li in data) {
                    var error_msg2 = $(<span class="pull-right" style="color: red" id="msg_error" > + data[name] + </span>);
                    if (error_msg2) {
                        $(#msg_error).remove()
                    }
                    $(#id_name).append(error_msg2);
                }else {
                    var error_msg2 = $(<span class="pull-right" style="color: red" id="msg_error" >可以使用的用户名 </span>);
                    if (error_msg2) {
                        $(#msg_error).remove()
                    }
                    $(#id_name).append(error_msg2);
                }
            }
        })
    })
</script>
</html>
注册功能页面(手撸) index.html
技术分享图片
from django.db import models

# Create your models here.
class User(models.Model):
    name=models.CharField(max_length=32)
    pwd=models.CharField(max_length=32)
    email=models.EmailField()
models.py

 
















以上是关于Django forms组件的主要内容,如果未能解决你的问题,请参考以下文章

Django 框架篇: Django中的Form 组件

Django—分页器与form组件

Django Form 组件

Django框架之Form组件

Django自带序列化组件;分页器;Forms组件

django之Form组件--ajax提交