zoukankan      html  css  js  c++  java
  • Django之forms组件使用

    注册功能
                1.渲染前端标签获取用户输入      >>>            渲染标签
                2.获取用户输入传递到后端校验    >>>            校验数据
                3.校验未通过展示错误信息        >>>            展示信息
        
            
            校验数据(前后端都可以校验)
                校验前端后端都可以做,但是前端可以不做,后端必须得做!!!
        
            
        django form组件
            1.渲染标签
            2.校验数据
            3.展示信息
            
            校验数据
                第一步需要在views中写一个form类
                    from django import forms
    
                    class MyForm(forms.Form):
                        name = forms.CharField(max_length=6)
                        password = forms.CharField(max_length=8,min_length=3)
                        email = forms.EmailField(required=True)
                第二步实例化form对象
                    form_obj = MyForm({'name':'jason'})
                
                第三步查看数据校验是否合法
                    form_obj.is_valid()  # 只有当所有的字段都校验通过才会返回True
                
                第四步查看校验错误的信息
                    form_obj.errors  # 这个里面放的是所有校验未通过的字段及错误提示
                    """
                    {
                    'name': ['Ensure this value has at most 6 characters (it has 7).'], 
                    'password': ['Ensure this value has at least 3 characters (it has 2).'], 
                    'email': ['Enter a valid email address.']
                    }
    
                    """
                第五步查看校验通过的数据
                    form_obj.cleaned_data  # 符合校验规则数据都会被放到该对象中
                ps:form组件校验数据的规则从上往下依次取值校验
                    校验通过的放到cleaned_data
                    校验失败的放到errors
                注意:
                    form中所有的字段默认都是必须传值的(required=True)
                    校验数据的时候可以都传(多传的数据不会做任何的校验>>>不会影响form校验规则)
            
            
            渲染标签
                form组件只帮你渲染获取用户输入的标签,不会帮你渲染提交按钮,需要手动添加
                <h1>第一种渲染方式(可扩展性较差)</h1>
                {{ form_obj.as_p }}
                {{ form_obj.as_ul }}
                
                <h1>第二种渲染方式</h1>
                <form action="">
                    <p>{{ form_obj.name.label }}{{ form_obj.name }}</p>
                    <p>{{ form_obj.password.label }}{{ form_obj.password }}</p>
                    <p>{{ form_obj.email.label }}{{ form_obj.email }}</p>
                    <input type="submit">
                </form>
                
                <h1>第三种渲染标签的方式</h1>
                    <form action="">
                        {% for foo in form_obj %}
                            <p>{{ foo.label }}{{ foo }}</p>
                        {% endfor %}
                    </form>
            
            前端取消校验 参数 novalidate
                <form action="" method="post" novalidate>
                </form>
            
            
            form组件提交数据如果数据不合法,页面上会保留之前用户输入的信息
            在使用form组件对模型表进行数据校验的时候,只需要保证字段一致
            那么在创建的对象的时候你就直接**form_obj.cleaned_data
            
            <form action="" method="post" novalidate>
                {% for foo in form_obj %}
                    <p>
                        {{ foo.label }}{{ foo }}
                        <span>{{ foo.errors.0 }}</span>
                    </p>
                {% endfor %}
                <input type="submit">
            </form>
            
            
            # 钩子函数
                # 局部钩子函数  (单个字段的校验利用局部钩子函数)
                def clean_name(self):
                    name = self.cleaned_data.get('name')
                    if '666' in name:
                        self.add_error('name','光喊666是不行的,要有真实力!')
                    return name  # return还是要加上的,兼容性考虑
    
                # 全局钩子函数  (多个字段的校验利用全局钩子函数)
                def clean(self):
                    password = self.cleaned_data.get('password')
                    confirm_password = self.cleaned_data.get('confirm_password')
                    if not password == confirm_password:
                        self.add_error('confirm_password',"两次密码不一致,你这个dsb!")
                    return self.cleaned_data
            
            
            
            
            # 设置标签样式
            from django import forms
            from django.forms import widgets
            password = forms.CharField(max_length=8,min_length=3,error_messages={
                                'max_length': '密码最长8位',
                                'required': '密码不能为空',
                                'min_length':'密码最少3位'
                                },widget=widgets.PasswordInput(attrs={'class':'c1 form-control'}))
            
            
                    hobby = forms.ChoiceField(
                    choices=((1, "篮球"), (2, "足球"), (3, "双色球"),),
                    label="爱好",
                    initial=3,
                    widget=forms.widgets.Select()
                )
                hobby1 = forms.MultipleChoiceField(
                    choices=((1, "篮球"), (2, "足球"), (3, "双色球"),),
                    label="爱好",
                    initial=[1, 3],
                    widget=forms.widgets.SelectMultiple()
                )
    
                keep = forms.ChoiceField(
                    label="是否记住密码",
                    initial="checked",
                    widget=forms.widgets.CheckboxInput()
                )

    forms组件使用完整示例:

    views中定义form类:

    class RegForm(forms.Form):
        name = forms.CharField(max_length=10,min_length=3,label='用户名', error_messages={
            'required':'用户名不能为空!',
            'invalid':'格式错误!',
            'max_length':'注册用户名长度不能超过10位!',
            'min_length':'注册用户名长度不能低于3位',
        },
        widget=forms.widgets.Input(attrs={'class':'form-control','style':'250px'},))
        password = forms.CharField(max_length=16,min_length=3,label='密码', error_messages={
            'required':'注册密码不能为空!',
            'invalid':'格式错误!',
            'max_length':'密码超出最大长度16位!',
            'min_length':'密码长度不能低于3位!'
        },
        widget=forms.widgets.PasswordInput(attrs={'class':'form-control','style':'250px'})
        )
        re_password = forms.CharField(max_length=16, min_length=3,label='再次输入密码', error_messages={
            'required': '注册密码不能为空!',
            'invalid': '格式错误!',
            'max_length': '密码超出最大长度16位!',
            'min_length': '密码长度不能低于3位!'
        },
        widget=forms.widgets.PasswordInput(
           attrs={'class': 'form-control', 'style': '250px'})
        )
        cellphone = forms.CharField(max_length=14,min_length=10,label='请输入手机号',error_messages={
            'required': '注册手机号不能为空!',
            'invalid': '格式错误!',
            'max_length': '手机号长度不合法!',
            'min_length': '手机号长度不合法!'
        },
        widget=forms.widgets.Input(attrs={'class':'form-control','style':'250px','id':'cellphone'})
        )
        def clean_name(self):
            name = self.cleaned_data.get("name")
            if not name.isalpha():
                self.add_error('name','用户名必须由字母数字组成!')
            elif name[0].isdigit():
                self.add_error('name','用户名不能以数字开头!')
            elif models.User.objects.filter(name=name):
                self.add_error('name','该用户名已存在!')
            return name
    
        def clean(self):
            password = self.cleaned_data.get("password")
            re_password = self.cleaned_data.get('re_password')
            if password != re_password:
                self.add_error('re_password','两次密码不一致!')
            elif password == '123':
                self.add_error('password','当前密码过于简单!')
            return self.cleaned_data
        def clean_cellphone(self):
            cellphone = self.cleaned_data.get("cellphone")
            regExp = "^((13[0-9])|(15[^4])|(18[0,2,3,5-9])|(17[0-8])|(147))\d{8}$"
            if not re.findall(regExp,cellphone):
                self.add_error('cellphone','请输入正确的手机号!')
            elif models.User.objects.filter(cellphone = cellphone):
                self.add_error('cellphone','该手机号已注册!请换一个再试!')
            return cellphone

    前端渲染代码:

    由于引入了许多第三方样式,没有导入JS,CSS样式等部分,截取了body部分作为示例

    <body>
    <div class="container" id="particles-js">
        <div id="main-div">
        <h3 style="text-align: center">欢迎注册图书管理系统</h3>
            <form action="" method="post" style=" 250px;margin: 20px auto"  autocomplete="off"  novalidate>
                {% for form_datum in form_data %}               
                    <p>{{ form_datum.label }}{{ form_datum }}
                        <span style="color: red">{{ form_datum.errors.0 }}</span>
                    </p>
                {% endfor %}
    
                <span>请输入验证码:</span>
                 <p >
                     <input type="text" class="form-control" name="yzm" style=" 120px;display:inline-block;">
                     <input href="#" class="btn btn-info feachBtn"  style=" 130px;float: right;" value="获取手机验证码">
                 </p>
                <span style="color: red">{{ yzm }}</span>
             <p style="padding: 10px 0;"><input type="submit" class="btn btn-info btn-block" value="注册"></p>
    
            </form>
        </div>
    </div>
    </body>

    views视图函数处理部分:

    def register(request):
    
        form_data = RegForm()
        if request.method == "POST":
            form_data = RegForm(request.POST)
            if form_data.is_valid():            #检查是否通过校验,没有则返回前端error信息,通过则注册
                dic = dict(form_data.cleaned_data)
                dic["user_type"] = 'user'
                dic.pop('re_password')
                # dic['cellphone'] = request.session.get("cellphone")
                models.User.objects.create(**dic)
                return redirect('/admins/show-book/')
        return render(request, "reg.html",locals())
  • 相关阅读:
    求子数组最大和
    <转>Android APP字体大小,不随系统的字体大小变化而变化的方法
    模块25 pageobject改造【进阶】
    第5阶段直播
    web测试-赠送课程
    模块四 -使用postman发送请求
    模块三 使用tcpdump抓包分析tcp三次握手四次挥手
    模块二 常见接口协议解析
    20200611_19元素操作
    20200609_18八大元素定位
  • 原文地址:https://www.cnblogs.com/dongxixi/p/11042917.html
Copyright © 2011-2022 走看看