Django Form表单组件

本文目录

1 校验字段功能
2 渲染标签功能
3 渲染错误信息功能
4 组件的参数配置
5 局部钩子
6 全局钩子

1 校验字段功能

针对一个实例：注册用户讲解。

模型：models.py

class UserInfo(models.Model):

    name=models.CharField(max_length=32)

    pwd=models.CharField(max_length=32)

    email=models.EmailField(

模版文件

复制代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form action="" method="post">

    {% csrf_token %}

    <div>

        <label for="user">用户名</label>

        <p><input type="text" name="name" id="name"></p>

    </div>

    <div>

        <label for="pwd">密码</label>

        <p><input type="password" name="pwd" id="pwd"></p>

    </div>

    <div>

        <label for="r_pwd">确认密码</label>

        <p><input type="password" name="r_pwd" id="r_pwd"></p>

    </div>

     <div>

        <label for="email">邮箱</label>

        <p><input type="text" name="email" id="email"></p>

    </div>

    <input type="submit">

</form>

</body>

</html>

视图函数：

# forms组件

from django.forms import widgets

wid_01=widgets.TextInput(attrs={"class":"form-control"})

wid_02=widgets.PasswordInput(attrs={"class":"form-control"})

class UserForm(forms.Form):

    name=forms.CharField(max_length=32,

                         widget=wid_01

                         )

    pwd=forms.CharField(max_length=32,widget=wid_02)

    r_pwd=forms.CharField(max_length=32,widget=wid_02)

    email=forms.EmailField(widget=wid_01)

    tel=forms.CharField(max_length=32,widget=wid_01)

def register(request):

    if request.method=="POST":

        form=UserForm(request.POST)

        if form.is_valid():

            print(form.cleaned_data)       # 所有干净的字段以及对应的值

        else:

            print(form.cleaned_data)       #

            print(form.errors)             # ErrorDict : {"校验错误的字段":["错误信息",]}

            print(form.errors.get("name")) # ErrorList ["错误信息",]

        return HttpResponse("OK")

    form=UserForm()

    return render(request,"register.html",locals())

回到目录

2 渲染标签功能

渲染方式1

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

   <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>

<body>

<h3>注册页面</h3>

<div class="container">

    <div class="row">

        <div class="col-md-6 col-lg-offset-3">

                <form action="" method="post">

                    {% csrf_token %}

                    <div>

                        <label for="">用户名</label>

                        {{ form.name }}

                    </div>

                    <div>

                        <label for="">密码</label>

                        {{ form.pwd }}

                    </div>

                    <div>

                        <label for="">确认密码</label>

                        {{ form.r_pwd }}

                    </div>

                    <div>

                        <label for=""> 邮箱</label>

                        {{ form.email }}

                    </div>

                    <input type="submit" class="btn btn-default pull-right">

                </form>

        </div>

    </div>

</div>

</body>

</html>

渲染方式2

<form action="" method="post">

                    {% csrf_token %}

                    {% for field in form %}

                        <div>

                            <label for="">{{ field.label }}</label>

                            {{ field }}

                        </div>

                    {% endfor %}

                    <input type="submit" class="btn btn-default pull-right">

</form>

渲染方式3

<form action="" method="post">

    {% csrf_token %}

    {{ form.as_p }}

    <input type="submit" class="btn btn-default pull-right">

</form>

回到目录

3 渲染错误信息功能

视图

def register(request):

    if request.method=="POST":

        form=UserForm(request.POST)

        if form.is_valid():

            print(form.cleaned_data)       # 所有干净的字段以及对应的值

        else:

            print(form.cleaned_data)       #

            print(form.errors)             # ErrorDict : {"校验错误的字段":["错误信息",]}

            print(form.errors.get("name")) # ErrorList ["错误信息",]

        return render(request,"register.html",locals())

    form=UserForm()

    return render(request,"register.html",locals())

模板

<form action="" method="post" novalidate>

    {% csrf_token %}

    {% for field in form %}

        <div>

            <label for="">{{ field.label }}</label>

            {{ field }} <span class="pull-right" style="color: red">{{ field.errors.0 }}</span>

        </div>

    {% endfor %}

    <input type="submit" class="btn btn-default">

</form>

回到目录

4 组件的参数配置

class Ret(Form):

    name = forms.CharField(max_length=10, min_length=2, label='用户名',

                           error_messages={'required': '该字段不能为空', 'invalid': '格式错误', 'max_length': '太长',

                                           'min_length': '太短'},

                           widget=widgets.TextInput(attrs={'class':'form-control'}))

    pwd = forms.CharField(max_length=10, min_length=2, widget=widgets.PasswordInput(attrs={'class':'form-control'}))

    email = forms.EmailField(label='邮箱', error_messages={'required': '该字段不能为空', 'invalid': '格式错误'})

回到目录

5 局部钩子

from django.core.exceptions import NON_FIELD_ERRORS, ValidationError
def clean_name(self):

        val=self.cleaned_data.get("name")

        ret=UserInfo.objects.filter(name=val)

        if not ret:

            return val

        else:

            raise ValidationError("该用户已注册!")

    def clean_tel(self):

        val=self.cleaned_data.get("tel")

        if len(val)==11:

            return val

        else:

            raise  ValidationError("手机号格式错误")

回到目录

6 全局钩子

    def clean(self):

        pwd=self.cleaned_data.get('pwd')

        r_pwd=self.cleaned_data.get('r_pwd')

        if pwd and r_pwd:

            if pwd==r_pwd:

                return self.cleaned_data

            else:

                raise ValidationError('两次密码不一致')

        else:

            return self.cleaned_data

pwd_err=my_form.errors.get('__all__')

from django import forms

from django.forms import widgets

from app01.models import UserInfo

from django.core.exceptions import NON_FIELD_ERRORS, ValidationError

class UserForm(forms.Form):

    name=forms.CharField(min_length=4,label="用户名",error_messages={"required":"该字段不能为空"},

                         widget=widgets.TextInput(attrs={"class":"form-control"})

                         )

    pwd=forms.CharField(min_length=4,label="密码",

                        widget=widgets.PasswordInput(attrs={"class":"form-control"})

                        )

    r_pwd=forms.CharField(min_length=4,label="确认密码",error_messages={"required":"该字段不能为空"},widget=widgets.TextInput(attrs={"class":"form-control"}))

    email=forms.EmailField(label="邮箱",error_messages={"required":"该字段不能为空","invalid":"格式错误"},widget=widgets.TextInput(attrs={"class":"form-control"}))

    tel=forms.CharField(label="手机号",widget=widgets.TextInput(attrs={"class":"form-control"}))

    def clean_name(self):

        val=self.cleaned_data.get("name")

        ret=UserInfo.objects.filter(name=val)

        if not ret:

            return val

        else:

            raise ValidationError("该用户已注册!")

    def clean_tel(self):

        val=self.cleaned_data.get("tel")

        if len(val)==11:

            return val

        else:

            raise  ValidationError("手机号格式错误")

    def clean(self):

        pwd=self.cleaned_data.get('pwd')

        r_pwd=self.cleaned_data.get('r_pwd')

        if pwd and r_pwd:

            if pwd==r_pwd:

                return self.cleaned_data

            else:

                raise ValidationError('两次密码不一致')

        else:

            return self.cleaned_data

myforms

from django.shortcuts import render,HttpResponse

# Create your views here.

from app01.myforms import *

def reg(request):

    if request.method=="POST":

        print(request.POST)

        #form=UserForm({"name":"yu","email":"123@qq.com","xxxx":"alex"})

        form=UserForm(request.POST) # form表单的name属性值应该与forms组件字段名称一致

        print(form.is_valid()) # 返回布尔值

        if form.is_valid():

            print(form.cleaned_data)  # {"name":"yuan","email":"123@qq.com"}

        else:

            print(form.cleaned_data)  # {"email":"123@qq.com"}

            # print(form.errors)        # {"name":[".........."]}

            # print(type(form.errors))  # ErrorDict

            # print(form.errors.get("name"))

            # print(type(form.errors.get("name")))    # ErrorList

            # print(form.errors.get("name")[0])

            #   全局钩子错误

            #print("error",form.errors.get("__all__")[0])

            errors=form.errors.get("__all__")

            return render(request,"reg.html",locals())

        '''

        form.is_valid()   :返回布尔值

        form.cleaned_data :{"name":"yuan","email":"123@qq.com"}

        form.errors       :{"name":[".........."]}

        '''

    form=UserForm()

    return render(request,"reg.html",locals())

视图函数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .error{

            color: red;

        }

    </style>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"

    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>

<body>

<div class="container">

    <div class="row">

        <div class="col-md-6 col-lg-offset-3">

            {#<h3>简单form</h3>#}

            {##}

            {##}

            {#<form action="" method="post" novalidate>#}

            {#    {% csrf_token %}#}

            {#    <p>用户名<input type="text" name="name"></p>#}

            {#    <p>密码 <input type="text" name="pwd"></p>#}

            {#    <p>确认密码 <input type="text" name="r_pwd"></p>#}

            {#    <p>邮箱  <input type="text" name="email"></p>#}

            {#    <p>手机号 <input type="text" name="tel"></p>#}

            {#    <input type="submit">#}

            {##}

            {#</form>#}

            <hr>

            <h3>forms组件渲染方式1</h3>

            <form action="" method="post" novalidate>

                {% csrf_token %}

                <p>{{ form.name.label }}

                    {{ form.name }} <span class="pull-right error">{{ form.name.errors.0 }}</span>

                </p>

                <p>{{ form.pwd.label }}

                    {{ form.pwd }} <span class="pull-right error">{{ form.pwd.errors.0 }}</span>

                </p>

                <p>确认密码

                    {{ form.r_pwd }} <span class="pull-right error">{{ form.r_pwd.errors.0 }}</span><span class="pull-right error">{{ errors.0 }}</span>

                </p>

                <p>邮箱 {{ form.email }} <span class="pull-right error">{{ form.email.errors.0 }}</span></p>

                <p>手机号 {{ form.tel }} <span class="pull-right error">{{ form.tel.errors.0 }}</span></p>

                <input type="submit">

            </form>

            {#<h3>forms组件渲染方式2</h3>#}

            {##}

            {#<form action="" method="post" novalidate>#}

            {#     {% csrf_token %}#}

            {##}

            {#    {% for field in form %}#}

            {##}

            {#        <div>#}

            {#            <label for="">{{ field.label }}</label>#}

            {#            {{ field }}#}

            {#        </div>#}

            {##}

            {#    {% endfor %}#}

            {##}

            {#     <input type="submit">#}

            {#</form>#}

            {##}

            {#<h3>forms组件渲染方式3</h3>#}

            {##}

            {#<form action="" method="post">#}

            {#     {% csrf_token %}#}

            {##}

            {#     {{ form.as_p }}#}

            {##}

            {#     <input type="submit">#}

            {#</form>#}

        </div>

    </div>

</div>

</body>

</html>

模版文件

Django Form表单组件的更多相关文章

Django form表单组件
目录 Django form表单组件 Form 组件介绍普通方式手写注册功能使用form组件实现注册功能 Form 常用字段与插件常用字段(必备) 字段参数(必备) 内置验证(必备) 自定义效 ...
Form( 表单) 组件
本节课重点了解 EasyUI 中 Form(表单)组件的使用方法, 这个组件不依赖于任何组件.一．加载方式表单组件只能在 JS 区域设置,首先定义一张表单.<form id="box ...
django form表单验证
一. django form表单验证引入有时时候我们需要使用get,post,put等方式在前台HTML页面提交一些数据到后台处理例 ; <!DOCTYPE html> <html ...
第二百二十一节，jQuery EasyUI，Form(表单)组件
jQuery EasyUI,Form(表单)组件学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解 EasyUI 中 Form(表单)组件的使用方法,这个组件不依赖于 ...
Django（5） session登录注销、csrf及中间件自定义、django Form表单验证（非常好用）
一.Django中默认支持Session,其内部提供了5种类型的Session供开发者使用: 数据库(默认) 缓存文件缓存+数据库加密cookie 1.数据库Session 1 2 3 4 5 ...
Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件
封装一个Form表单组件和Table组件有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...
封装react antd的form表单组件
form表单在我们日常的开发过程中被使用到的概率还是很大的,比如包含了登录.注册.修改个人信息.新增修改业务数据等的公司内部管理系统.而在使用时这些表单的样式如高度.上下边距.边框.圆角.阴影.高亮等 ...
封装Vue Element的form表单组件
前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像& ...
Django之form表单组件
Form介绍我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否 ...

随机推荐

Good Introduction of Kerberos and RADIUS
1. RADIUS https://baike.baidu.com/item/RADIUS/3073981?fr=aladdin http://www.h3c.com/cn/d_201309/9220 ...
CF451E Devu and Flowers 数论
正解:容斥+Lucas定理+组合数学解题报告: 传送门! 先mk个我不会的母函数的做法,,, 首先这个题的母函数是不难想到的,,,就$\left ( 1+x_{1}^{1}+x_{1}^{2}+. ...
css实现三角形相关
1.css样式面包屑导航条实现矩形和三角箭头拼接 .cssTest { font-family: PingFangSC-Regular; font-size: 16px; color: #333333 ...
使用easyui搭建网页架子
使用踩坑: 一.弹出框上datagrid第二次加载数据,必须在显示状态,datagrid加载数据才会渲染,否则是空白 $('#xq_selKs').window('open').window('cen ...
spring boot集成aop实现日志记录
1.pom依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...
19.C# 泛型
1.泛型的概念所谓泛型,即通过参数化类型来实现在同一份代码上操作多种数据类型.泛型编程是一种编程范式,它利用“参数化类型”将类型抽象化,从而实现更为灵活的复用. 2. .net提供的泛型 2.1可空 ...
echarts 中国地图数据自动提示
mounted() { // 首先每种图是根据series -->type决定的 eg:bar--柱状图 line 折线图 pie饼图 map地图等等三部曲跟着走 // @第一步都是初始化 v ...
net Core TOptions和热更新
TOptions接口 net Core 项目有个appsettings.json文件,程序默认也是读取的这个文件,appsettings.json是一个配置文件我们可以把appsettings.js ...
php----------php安装xhprof扩展和简单使用
1.下载源码包 https://github.com/longxinH/xhprof (wget https://github.com/longxinH/xhprof/archive/master. ...
C#保存日志文件到txt中,可追加保存，定时删除最后一次操作半年前日志文件
/// <summary> /// 输出指定信息到文本文件 /// </summary> /// <param name="msg">输出信息& ...

Django Form表单组件

1 校验字段功能

2 渲染标签功能

渲染方式1

渲染方式2

渲染方式3

3 渲染错误信息功能

视图

模板

4 组件的参数配置

5 局部钩子

6 全局钩子

Django Form表单组件的更多相关文章

随机推荐

热门专题