zoukankan      html  css  js  c++  java
  • forms组件

    forms组件

    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
    
    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>
    
  • 相关阅读:
    百度地图中找不到BMap的解决
    关于baidu map js api的各种踏坑
    手机版的百度map封装,使用gps定位
    js获取今天,明天,本周五,下周五日期的函数
    表格中的td内的div的文字内容禁止换行一行显示的css
    一次tomcat的调优记录
    一个input输入内容监听联动的demo
    确认框,confirm工具封装
    [Web API] Web API 2 深入系列(6) Model绑定(上)
    [Web API] Web API 2 深入系列(5) 特性路由
  • 原文地址:https://www.cnblogs.com/Dr-wei/p/11838750.html
Copyright © 2011-2022 走看看