首页 > 其他分享 >Form组件

Form组件

时间:2024-09-14 13:25:17浏览次数:1  
标签:__ widget Form form forms field 组件 class

1.1 初识Form组件

基于注册为例来进行测试。

详细见示例:1-form组件.zip

1.2 错误信息

image-20230723104221558

1.3 展示所有的字段

对象和可迭代对象。

image-20230723105910176

1.4 问题:关于样式

  • 手动操作

    class RegisterForm(forms.Form):
        v1 = forms.CharField(
            label="手机号",
            required=True,
            # max_length=19,
            # min_length=6,
            initial="武沛齐",
            validators=[RegexValidator(r'^\d{11}$', "手机号格式错误"), ],
            widget=forms.TextInput(attrs={"class":"form-control"}) # <input type="text" class="form-control"/>
        )
        v2 = forms.CharField(
            label="备注",
            required=True,
            widget=forms.Textarea(attrs={"class":"form-control"}) # <textarea class="form-control"/></textarea>
        )
        ...
        ....
        .....
    
    {% for field in form %}
    	<p>{{ field.label }} {{ field }} {{ field.errors.0 }}  </p>
    {% endfor %}
    
  • 自动操作(找到每个字段中的widget插件,再找到插件中的attrs属性,给他每个赋值{"class":"form-control"}

    class RegisterForm(forms.Form):
        v1 = forms.CharField(...,widget=forms.TextInput)
        v2 = forms.CharField(...,widget=forms.TextInput(attrs={"v1":"123"}))
        
        def __init__(self,*args,**kwargs):
            super().__init__(self,*args,**kwargs)
            for name,field in self.fields.items():
                if name == "v1":
                    continue 
                if field.widget.attrs:
                    field.widget.attrs.update({"class":"form-control"})
                else:
                	field.widget.attrs = {"class":"form-control"}
    
    form = RegisterForm()                   # __init__
    form = RegisterForm(data=request.POST)  # __init__
    

1.5 问题:通用父类

class BootStrapForm(object):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        for name, field in self.fields.items():
            field.widget.attrs = {"class": "form-control"}


class LoginForm(BootStrapForm, forms.Form):
    user = forms.CharField(label="用户名", widget=forms.TextInput)
    pwd = forms.CharField(label="密码", widget=forms.TextInput)


def login(request):
    form = LoginForm()
    return render(request, "login.html", {"form": form})
class BootStrapForm(forms.Form):
    def __init__(self, *args, **kwargs):
        # 不是找父类
        # 根据类的mro(继承关系),去找上个类
        # super().__init__(*args, **kwargs)
        for name, field in self.fields.items():
            field.widget.attrs = {"class": "form-control"}

class LoginForm(BootStrapForm):
    user = forms.CharField(label="用户名", widget=forms.TextInput)
    pwd = forms.CharField(label="密码", widget=forms.TextInput)

def login(request):
    form = LoginForm()
    return render(request, "login.html", {"form": form})

标签:__,widget,Form,form,forms,field,组件,class
From: https://www.cnblogs.com/sherwin1995/p/18413784

相关文章

  • uniapp - 最新详细实现web-view网页与安卓苹果App端之间互相通信功能,苹果app/安卓app
    前言在uni-app项目开发中,详解实现web-view和App之间的互相通信完整流程及代码教程,Uniappapp端向webview网站传递数据,同时webview又可以向app端传递数据参数,完成二者的数据通信方案,支持嵌入本地移动端H5页面、第三方网站、自定义网页,附带各种常见问题,解决发送数据通信没......
  • C# jsonconvert and binaryformater both in serialize and deserialize
    publicDelCmdExportAllCmd{get;set;}publicDelCmdExportAllBinaryFormatterCmd{get;set;}publicDelCmdDeserializeJsonFileCmd{get;set;}publicDelCmdDeserializeBinFileCmd{get;set;}privatevoidInitCmds(){ExportAllCmd=newDelC......
  • GIS进阶-Openlayers、Vue+Openlayers、Leaflet、Geoserver、PostGis、Java集成Geotool
    场景作为一名非专业GIS开发者,在日常企业级开发中遇到GIS领域相关业务需求时,参考资料较少,各种体系生态不明确。往往因为错过了好多大神封装好的工具、借口、三方框架、api等白白浪费时间。最主要的是此专栏会持续更新,毕竟GIS的知识体系远不止如此,后续会持续记录、共同积累、共同......
  • modbus调试助手/mqtt调试工具/超轻巧物联网组件/多线程实时采集/各种协议支持
    一、前言说明搞物联网开发很多年,用的最多的当属modbus协议,一个稳定好用的物联网组件是物联网平台持续运行多年的基石,所以这个物联网组件从一开始就定位于自研,为了满足各种场景的需求,当然最重要的一点就是大大提升了自己对该协议的深度理解和应用,尤其是面对各种场景需求,逐步调整迭......
  • vue3/provider 和 inject实现跨组件动态数据传递。
    实现跨层传递在Vue中,provider和inject是一种用于实现依赖注入的高级特性,允许一个祖先组件向其所有子孙组件注入一个依赖,而不论组件层次有多深,并在起上下游关系成立的时间里始终生效。这在某些场景下非常有用,比如当你需要跨多个组件层级传递数据时。定义provide对象:在父组......
  • .NET 多版本 WinForm 开源控件库 SunnyUI
    合集-.NET开源工具(15) 1..NET开源快捷的数据库文档查询和生成工具07-312..NET结果与错误处理利器FluentResults08-013..NET+WPF桌面快速启动工具GeekDesk08-194.Gradio.NET支持.NET8简化Web应用开发08-265..NET开源实时监控系统-WatchDog08-276.实用接地......
  • 基于Uni-app前端框架的SUMER UI3.0组件库!一端开发,多端运行!本组件库可快速二次开发各种
    基于Uni-app前端框架的SUMERUI3.0组件库!一端开发,多端运行!本组件库可快速二次开发各种类别各行业模板,包括:商城、视频、直播、聊天、支付、新闻、社区、地图、导航、出行、社区、博客等sumer-ui介绍基于uView微信小程序UI组件库,兼容vue3。本插件是SUMER组件库,只提供组件......
  • [独家原创]基于(开普勒)KOA-Transformer-LSTM多特征分类预测【24年新算法】 (多输入单
    [独家原创]基于(开普勒)KOA-Transformer-LSTM多特征分类预测【24年新算法】(多输入单输出)Matlab代码你先用你就是创新!!!(鳑鲏鱼)KOA优化的超参数为:隐藏层节点数、正则化系数、初始化学习率1.程序已经调试好,无需更改代码替换数据集即可运行!!!数据格式为excel!2.Transformer作为......
  • HTML5中的enctype和formenctype有什么区别?
    enctype是HTML5中用于指定表单数据编码方式的属性。它决定了表单数据在提交到服务器时的编码格式。常见的enctype值包括application/x-www-form-urlencoded、multipart/form-data和text/plain等。不同的enctype值适用于不同的表单数据类型和提交方式。在实际开发中,需要根......
  • elementUI--el-form表单数据校验
    一、普通的值类型的数据校验①设置 el-form-item的prop 值与 formdata中定义的key 保持一致`②如果rules需要通过el-form统一设置,rules的key 定义也与prop保持一致(如果不一致,需要在el-form-item中手动指定)③复杂的校验函数可通过 validator 单独定义<el-for......