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标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否 ...

随机推荐

LDAP与实现
LDAP是什么? LDAP是轻量目录访问协议,英文全称是Lightweight Directory Access Protocol,一般都简称为LDAP.它是基于X.500标准的,但是简单多了并且可以 ...
jmeter 之 beanshell sample
Lightweight Scripting for Java 官网:http://www.BeanShell.org/ 定时器: BeanShell Timer 前置处理器:BeanShell Pre ...
SoupUI 5.1.2（专业版）下载（含破解文件）
包内含原安装包和破解文件,仅用于技术交流,切勿用于商业用途. 安装教程参考:https://www.cnblogs.com/miaojjblog/p/9778839.html 安装包及破解文件下载地址 ...
vue-cli3快速原型开发
先来讲一下,什么是快速原型开发. 当我们需要紧急或提前开发单独的一个页面时,有时候不需要在原项目中创建一个页面,再开发,我们可以单独的区开发这个项目,那么怎样单独的区开发这个项目呢,之前使用过vue- ...
Vue.js中使用select选择下拉框
在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...
oracle多行合并一行
以上图为例执行SQL语句: select d.group_id,to_char(wm_concat(d.tag)) from Imglib_Group_Tag d where d.group_id= ...
FindVisualChild
public static List<T> FindVisualChild<T>(DependencyObject obj) where T : DependencyObjec ...
【托业】【怪兽】TEST02
★ overturn v.推翻 ★ disciplinary adj.纪律的; 训练的; 惩罚的; ★disciplined 有纪律的 ★discipline v.纪律 ★outlook 态度 ★pe ...
@ResponseBody ResponseEntity
1.产生疑问我们知道,如果在 Controller 的某个方法上加上 @ResponseBody 注解,那么你就能拿到 json 数据. 如果你只是知道这么用,那么你应该知道 ResponseBod ...
vue深度监控数据改变，缓存数据到本地
项目效果图: var vm = new Vue({ el:'#app', data:{ students:[], }, watch:{ students:{ handler(){ localStora ...

Django Form表单组件

1 校验字段功能

2 渲染标签功能

渲染方式1

渲染方式2

渲染方式3

3 渲染错误信息功能

视图

模板

4 组件的参数配置

5 局部钩子

6 全局钩子

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

随机推荐

热门专题