Django Form组件（十）

一、传统表单校验

复制代码

 编写前端HMTL页面，渲染HTML页面，后端对用户进行了数据校验，对不符合要求前端进行显示
   1.注册功能
   2.获取用户和密码，使用form表单提交数据
   3.在后端判断前端是否一致
   4.如果符合一致，展示前端页面显示

（1）models.py

python 复制代码

from django.db import models

# Create your models here.
class UserInfo(models.Model):
    username = models.CharField(verbose_name='用户名', max_length=30)
    password = models.CharField(verbose_name='密码', max_length=10)
    tel = models.CharField(verbose_name='手机号码', max_length=11, null=True)
    email = models.EmailField(verbose_name='邮箱', null=True)

    #数据
    class Meta:
        db_table='userinfo'
        verbose_name='用户'
        verbose_name_plural=verbose_name

    #重写
    def __str__(self):
        return self.username

(2) views.py

python 复制代码

def register(request):
    # 提示错误信息
    user_dict = {'username': '', 'password': '', 'tel': '', 'emails': ''}
    # 使用post访问方式
    if request.method == 'POST':
        # 获取用户名,密码，手机号，邮箱
        name = request.POST.get('username')
        pwd = request.POST.get('password')
        tel = request.POST.get('tel')
        email = request.POST.get('emails')

        # 判断
        if not name:
            user_dict['username'] = '用户名不能为空'
        if len(name) > 6:
            user_dict['username'] = '用户名不能为6个字符'

        # 最短6位，最长8位 可以包含小写大母和大写字母可以包含数字可以包含下划线和减号
        if not re.match(r'^[\w_-]{6,8}$', pwd):
            user_dict['password'] = '密码强度不符合要求'

        if not re.match(r'^130\d{8}$', pwd):
            user_dict['tel'] = '手机号码必须130开头'

        if not re.match(r'^\w+@\w+\.\w+|$', email):
            user_dict['emails'] = '此邮箱不合法'

    return render(request, 'myformcom.html', locals())

(3) myformcom.html

python 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>

<form action="" method="post">
    {% csrf_token %}
    <h2 class="title">用户注册-Form手动</h2>

    <div class="form-group">
        <label for="name">用户名：</label>
        <input type="text" name="username" id="name" class="form-control" placeholder="请输入用户名">
          <span style="color:red">{{ user_dict.username }}</span>
    </div>
    <div class="form-group">
        <label for="pwd">密码：</label>
        <input type="text" name="password" id="pwd" class="form-control" placeholder="请输入密码">
         <span style="color:red">{{ user_dict.password }}</span>
    </div>
    <div class="form-group">
        <label for="email">邮箱：</label>
        <input type="email" name="emails" id="email" class="form-control" placeholder="请输入邮箱">
        <span style="color:red">{{ user_dict.emails }}</span>
    </div>
    <div class="form-group">
        <label for="tel">手机号：</label>
        <input type="tel" name="tel" id="tel" class="form-control" placeholder="请输入手机号">
         <span style="color:red">{{ user_dict.tel }}</span>
    </div>
    <div class="form-group">
        <input type="submit" value="提交" class="btn btn-success">
    </div>

</form>


</body>
</html>

(4) 运行

二、Django Form 组件

它用于对页面进行初始化，生成 HTML 标签，此外还可以对用户提交的数据进行校验（显示错误信息）。forms组件的主要功能如下:

渲染页面标签

校验字段

保留用户的输入并渲染错误信息

Form定义在views.py文件中

python 复制代码

# #定义form类
class UserInform(Form):
    username = forms.CharField(max_length=6, error_messages={
        'required': '名字不能为空', 'invalid': '请输入正确的名字'
    })

    password = forms.CharField(max_length=8, min_length=6, error_messages={
        'required': '请输入密码', 'min_length': '密码最低6位', 'max_length': '密码超过8位'
    })

    email = forms.EmailField(required=False, error_messages={
        'invalid': '请输入正确的邮箱'
    })  # 可以不输入

    tel = forms.CharField(validators=[
        RegexValidator(r'^13\d{9}$', '请输入正确的手机号码')  # 自定义校验规则
    ], required=False)

Form内置字段说明：

required=False, 是否允许为空

widget=None, HTML 插件

label=None, 用于生成 Label 标签或显示内容

initial=None, 初始值

help_text='', 帮助信息(在标签旁边显示)

error_messages=None, 错误信息 {'required': '不能为空', 'invalid': '格式错误'}

show_hidden_initial=False, 是否在当前插件后面再加一个隐藏的且具有默认值的插件(可用于检验两次输入是否一直)

validators=[], 自定义验证规则

localize=False, 是否支持本地化

disabled=False, 是否可以编辑

label_suffix=None Label 内容后缀

（1）CharField(Field)

max_length=None, 最大长度

min_length=None, 最小长度

strip=True 是否移除用户输入空白

（2）DecimalField(IntegerField)

max_value=None, 最大值

min_value=None, 最小值

max_digits=None, 总长度

decimal_places=None, 小数位长度

（3） IntegerField(Field)

max_value=None, 最大值

min_value=None, 最小值

1、默认表单的数据：

python 复制代码

def register2(request):
    data={"username":"","password":"123","email":"111","tel":"130"}
    # 使用form表单对象
    form_obj = UserInform(data)
    # 判断传入的数据是否合法
    if not form_obj.is_valid():
        # 校验不通过
        print(form_obj.errors)  # 校验失败的错误信息
    else:
        print(form_obj.cleaned_data)  # 校验成功之后的数据

    return render(request, 'myformcom2.html', locals())

页面 myformcom2.html

渲染一

python 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>

<form action="" method="post">
    <h2 class="title">用户注册-Form组件</h2>
    <p>第一种渲染方式</p>
    {{ form_obj }}
</form>
</body>

运行

渲染二

python 复制代码

<form action="" method="post">
    <h2 class="title">用户注册-Form组件</h2>
    <p>第二种渲染方式</p>
  <div class="form-group">
        <label for="name">用户名：</label>
        <input type="text" name="username" id="name" class="form-control" placeholder="请输入用户名" required maxlength="6">
    </div>
    <div class="form-group">
        <label for="pwd">密码：</label>
        <input type="text" name="password" id="pwd" class="form-control" placeholder="请输入密码" required maxlength="8" minlength="6">
    </div>
    <div class="form-group">
        <label for="email">邮箱：</label>
        <input type="email" name="emails" id="email" class="form-control" placeholder="请输入邮箱" required>
    </div>
    <div class="form-group">
        <label for="tel">手机号：</label>
        <input type="tel" name="tel" id="tel" class="form-control" placeholder="请输入手机号">
    </div>
</form>

渲染三

python 复制代码

<form action="" method="post">
    <h2 class="title">用户注册-Form组件</h2>
    <p>第三种渲染方式</p>
{#    {{ form_obj.as_ul }}#}
{#    {{ form_obj.as_div }}#}
    {{ form_obj.as_p }}
</form>

2、根据表单提交数据 views.py

python 复制代码

def register3(request):
    # 使用post方式
    if request.method == 'POST':
        # 获取 POST 请求的数据
        data: dict = request.POST
        # 使用form表单对象
        form_obj = UserInform(data)
        # 判断传入的数据是否合法
        if not form_obj.is_valid():
            # 校验不通过
            print(form_obj.errors)  # 校验失败的错误信息
        else:
            print(form_obj.cleaned_data)  # 校验成功之后的数据

    return render(request, 'myformcom3.html', locals())

myformcom3.html

python 复制代码

<form action="" method="post" data-options="novalidate:true">
    {% csrf_token %}
    <h2 class="title">用户注册-Form组件</h2>
    <div class="form-group">
        <label for="name">用户名：</label>
        <input type="text" name="username" id="name" class="form-control" placeholder="请输入用户名">
            <span style="color:red">{{ form_obj.username.errors.0}}</span>
    </div>
    <div class="form-group">
        <label for="pwd">密码：</label>
        <input type="text" name="password" id="pwd" class="form-control" placeholder="请输入密码">
          <span style="color:red">{{ form_obj.password.errors.0}}</span>
    </div>
    <div class="form-group">
        <label for="email">邮箱：</label>
        <input type="email" name="emails" id="email" class="form-control" placeholder="请输入邮箱">
        <span style="color:red">{{ form_obj.emails.errors.0 }}</span>
    </div>
    <div class="form-group">
        <label for="tel">手机号：</label>
        <input type="tel" name="tel" id="tel" class="form-control" placeholder="请输入手机号">
        <span style="color:red">{{ form_obj.tel.errors.0}}</span>
    </div>
    <div class="form-group">
        <input type="submit" value="提交" class="btn btn-success">
    </div>

</form>

运行