from django.contrib import admin
from django.urls import path
from app01 import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('test/',views.test)   #测试form组件的路由
]


　　

 



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


class UserInfo(forms.Form):

    username = forms.CharField(
        label='用户名',
        initial='默认值',      #设置默认值
        #min_length=6,        #最小长度为6
        required=True,        #不能为空
        error_messages={      #自定义错误的提示信息
            'required': '不能为空'
        }
    )

    password = forms.CharField(
        label='密码',
        widget=forms.widgets.PasswordInput(render_value=True)  #普通输入框提交后会默认保留数据，但是密码不会，因此render_value=True可以强制保留
    )



def test(request):
    if request.method == 'GET':
        u_obj = UserInfo()
        return render(request,'test.html',{'u_obj': u_obj})
    else:
        u_obj = UserInfo(request.POST)   #标签的 name 值为类中的属性名（本例中分别为：username/password）
        if u_obj.is_valid():  #校验用户提交的数据是否符合要求，如果全部校验成功则返回True,否则返回False
            print(u_obj.cleaned_data)   #校验成功之后的数据
            return HttpResponse('检验通过')
        else:
            print(u_obj.errors)   #校验失败后的错误信息
            return render(request,'test.html',{'u_obj': u_obj})  #此时的u_obj对象含有刚才校验的数据，可以将错误信息传到前端进行提示


　　

 



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .c1{
            background-color: red;
        }
    </style>
</head>
<body>
    {{ u_obj.errors }}  {# 将错误信息展示在页面 #} {# 但是u_obj.errors表示所有的错误信息 #}


    <form action="" method="post" novalidate>  {# 浏览器会默认帮我们提示 “此字段不能为空”，novalidate可以取消浏览器的这个默认的提示 #}
        {% csrf_token %}
        <div>
            {{ u_obj.username.label }}:{{ u_obj.username }} {{ u_obj.username.errors.0 }}  {# 每个字段有自己的错误，u_obj.username.errors.0显示自己的第一个错误 #}
        </div>
        <div>
            {{ u_obj.password.label }}:{{ u_obj.password }}
        </div>


        <div>
            <input type="submit" value="提交">
        </div>
    </form>


</body>
</html>