django 使用form组件提交数据之form表单提交

django的form组件可以减少后台在进行一些重复性的验证工作,极大降低开发效率。

最近遇到一个问题:

  当使用form表单提交数据后,如果数据格式不符合后台定义的规则,需要重新在前端页面填写数据。

分析问题:

  由于form的POST 请求发出去后会刷新整个页面,自然无法保留上次输入的内容。

解决问题: 

  采用ajax的方式发出请求,避免刷新整个页面。

 

ajax是脑海里第一个冒出的想法,但经过了解form组件内部的更多参数以及原理,发现其实也可以在form发出

POST请求时保留上次输入的内容。这里面有个关键是: 可以使用form组件在前端页面中生成html标签。

 

下面贴下代码:

1.先在后台创建基于Form的类,在类中创建字段以此定义规则。

from django.forms import  Form,fields
class RegisterForm(Form):
    user = fields.CharField(
        min_length=6,
        max_length=16,
        error_messages={'min_length':'太短了','max_length':'太长了'},
        label='用户名',
    )
    password = fields.CharField(
        min_length=6,
        max_length=16,
        error_messages={'min_length':'太短了','max_length':'太长了'},
        label='密码',
    )
    email = fields.EmailField(
        label='邮箱',
    )

2.前端页面代码

代码中obj是从后台传过来的,代表的是Form类的对象。在Django中,可以将obj传到前端。

通过obj点出类中的字段名称。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form method="POST" action="/register/" novalidate>
        <p>
            {{ obj.user.label }}{{ obj.user }} {{ obj.errors.user.0 }}  
        </p>
        <p>
           {{ obj.password.label }} {{ obj.password }} {{ obj.errors.password.0 }}
        </p>
        <p>
            {{ obj.email.label }} {{ obj.email }} {{obj.errors.email.0 }}
        </p>
        <input type="submit"/>
    </form>
</body>
</html>

3.后台逻辑代码

def register(request):
    if request.method=='GET':
        obj = RegisterForm()    #当通过get请求来到注册页面时,没有携带数据,obj生成的html标签就自然没有values值      
        return render(request,'register.html',{'obj':obj})
    else:
        obj=RegisterForm(request.POST)#post请求发来了数据,此时obj中有values
        v = obj.is_valid()#验证
        if v:
            print(obj.cleaned_data)#验证正确时在后台输出数据
            return redirect('http://www.baidu.com')
        else:
            print(obj.errors) #错误信息
            print(obj['user']) #obj其实打印出来是一串html形式的字符串 此句得到的结果是 <input type="text" name="user" maxlength="16" minlength="6" required id="id_user">
            return render(request,'register.html',{'obj':obj})#传回前端的obj,包含数据

print(obj)后得出的结果

<tr><th><label for="id_user">用户名:</label></th><td><ul class="errorlist"><li>This field is required.</li></ul><input type="text" name="user" maxlength="16" minlength="6" required id="id_user"></td></tr>
<tr><th><label for="id_password">密码:</label></th><td><ul class="errorlist"><li>This field is required.</li></ul><input type="text" name="password" maxlength="16" minlength="6" required id="id_password"></td></tr>
<tr><th><label for="id_email">邮箱:</label></th><td><ul class="errorlist"><li>This field is required.</li></ul><input type="email" name="email" required id="id_email"></td></tr>

 

posted @ 2019-01-27 10:18  小胡子oYi  阅读(1515)  评论(0编辑  收藏  举报