django form组件

    -form组件
        需求:
            1、重复的写验证逻辑,正则表达式
            2、不能够保存上一次用户输入的数据

先解决第一个问题,重复的写验证逻辑,正则表达式


        django提供的form组件:
            1、引入form包:
                

from django.forms import fields,Form


            2、定义规则:
                

class LoginForm(Form):
    username = fields.CharField(max_length=4,
                                min_length=2,
                                required=True,
                                error_messages={
                                    "required": "不能为空",
                                    "min_length": "最低输入2两个",
                                    "max_length": "最多输入4个"
                                })#


                                                
            3、使用:
                

obj = LoginForm(request.POST)


                判断结果:
                    

obj.is_valid()


                正确数据:
                    

obj.cleaned_data


                错误信息:
                    

obj.errors


            4、前段页面展示错误信息
                

<input type="text" name="username">{{ obj.errors.username.0}}

例如:

from django.shortcuts import render,HttpResponse
from django.forms import fields,Form

class LoginForm(Form):
    username = fields.CharField(max_length=4,
                                min_length=2,
                                required=True,
                                error_messages={
                                    "required": "不能为空",
                                    "min_length": "最低输入2两个",
                                    "max_length": "最多输入4个"
                                })#

def login(req):
    if req.method == "GET":
        return render(req,"login.html")
    else:
        obj = LoginForm(req.POST)
        if obj.is_valid():#is_valid()是根据LoginForm里的字段参数判断的,底层是正则匹配
            return HttpResponse("ok")
        else:
            return render(req, "login.html", {"obj": obj})

网页前端:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/login/" method="post">
    {% csrf_token %}
    <p>
        <input type="text" name="username">{{ obj.errors.username.0}}
        <input type="submit" value="提交">
    </p>

</form>
</body>
</html>

field的参数设置

所有的字段例如charfield都继承自field这个父类,

required=True,#此字段是否必须不为空
widget=None,#html插件
label=None,#用于生产标签或显示内容
initial=None,#初始值
help_text='',#帮助信息(在标签旁边显示)
error_messages=None,#错误信息 "required": "不能为空"
validators=(),#自定义验证规则
localize=False,#是否支持本地化(时间)
disabled=False,#是够可以编辑
label_suffix=None#label内容后缀

所以所有字段都支持这些参数

class LoginForm(Form):
    username = fields.CharField(max_length=4,
                                min_length=2,
                                required=True,
                                label="账号",
                                label_suffix=":",
                                initial="555",
                                disabled=True,
                                help_text="帮助信息",
                                error_messages={
                                    "required": "不能为空",
                                    "min_length": "最低输入2两个",
                                    "max_length": "最多输入4个"
                                })#

def login(req):
    if req.method == "GET":
        obj = LoginForm()#产生的是以上设置后产生的标签,直接返给前端使用
        return render(req,"login.html",{"obj":obj})
    else:
        obj = LoginForm(req.POST)
        if obj.is_valid():#is_valid()是根据LoginForm里的字段参数判断的,底层是正则匹配
            return HttpResponse("ok")
        else:
            return render(req, "login.html", {"obj": obj})

打印obj显示的html标签

    <tr>
        <th>
            <label for="id_username">账号:</label>
        </th>
        <td><input type="text" name="username" value="555" maxlength="4" minlength="2" required disabled id="id_username" />
            <br />
            <span class="helptext">帮助信息</span>
        </td>
    </tr>

前端:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/login/" method="post">
    {% csrf_token %}
    <p>
        {{ obj }}
    </p>

</form>
</body>
</html>

第二个问题,保存用户上一次输入的数据

5 obj = LoginForm()
                -帮助生产前段代码
                -帮助留住用户上一次输入的数据,

后台不变,前端网页修改成以下,则可以实现在输入错误的情况下保存用户上一次输入的数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/login/" method="post" novalidate>
    {% csrf_token %}
    <p>
        {{ obj.username.label }}{{ obj.username }}{{ obj.errors.username.0 }}

    </p>
    <input type="submit" value="提交">



</form>
</body>
</html>

widget插件

from django.forms import Textarea,Widget

widget是插件 在字段的参数里设置,Textarea是文本输入框,还有密码框等等其他框,使用便利,不用自己在前端设置。

前端容错验证插件 jquery validate:


                前后端一定要容错验证

猜你喜欢

转载自blog.csdn.net/u014248032/article/details/84951968