[oldboy-django][2深入django]Form组件功能: 数据格式验证 + 保留上次输入的值(如果有很多输入项,这样正确项不必重复输入,错误项也能提示错误信息)

Posted liuzhipenglove

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[oldboy-django][2深入django]Form组件功能: 数据格式验证 + 保留上次输入的值(如果有很多输入项,这样正确项不必重复输入,错误项也能提示错误信息)相关的知识,希望对你有一定的参考价值。

1 需求:登录或者注册页面存在以下问题

- 无法记住上次提交的内容,(如果有很多输入项,这样正确项不必重复输入,错误项也能提示错误信息)
- 重复进行提交数据的校验(数据是否为空,长度大小等等)

2 django的Form组件实现

  2.1 Form组件实现数据验证方法   

    2.1.1 流程操作

技术分享图片
        - 定义规则(数据的格式,字段必须和表单上name属性一致)
            class LoginForm(Form):
                字段名 = fields.xxFields(参数) # 定义了一个输入框的数据格式要求
            
            实例化对象obj = LoginForm(request.POST)

        - 数据检验
            obj.is_valid()

        - 提供详细错误信息(可以自定制错误提示)
            -- 自定制错误信息,在类定义的时候通过error_messages参数
            obj.errors

        - 提供符合规则的信息(类型是字典,数据库orm操作支持类型是字典操作)
            obj.cleaned_data
View Code

    2.1.2 实例

技术分享图片
- Form提交(提交页面就会刷新,不保留上次输入内容)
                - 流程
                    a.写类LoginForm(Form):
                        字段名 = fields.xxFields() # 验证规则,本质是正则表达式(fields.xxFields()是一个正则表达式)
                        字段名 = fields.xxFields() # 验证规则,本质是正则表达式
                    b. obj = LoginForm(request.POST)
                    c. 验证数据result = obj.is_valid()
                    d. 拿到符合格式的数据 obj.cleaned_data
                    e. 不符合格式,获取错误信息 obj.errors

                - 内部原理
                    """
                        obj.is_valid()执行
                        1 LoginForm(request.POST)实例化时
                            self.fields = {
                                ‘username‘: 正则表达式,
                                ‘password‘: 正则表达式,
                            }
                        2 循环self.fields
                            flag = True
                            cleaned_data = {}
                            errors = {}
                            for k,v in self.fields.items():
                                #1 k = ‘username‘, v = 正则表达式
                                #2 k = ‘password‘, v = 正则表达式
                                input_value = request.POST.get(k)
                                if re.match(input_value, v):
                                    flag = True
                                else:
                                    flag = False
                            return flag

                    """

                - Form提交数据验证程序(没有实现保留上次输入的值)
                    # 前端
                        <form action="/app02/login" method="POST">
                            {% csrf_token %}
                            <p>
                                <input type="text" name="user" placeholder="用户名">
                                <span style="color:red;">{{ error.user.0 }}</span>
                            </p>
                            <p>
                                <input type="password" name="pwd" placeholder="密码">
                                <span style="color:red;">{{ error.pwd.0 }}</span>
                            </p>
                            <p><input type="submit" value="提交"></p>
                        </form>

                    # LoginForm类
                    class LoginForm(Form):
                        user = fields.CharField(required=True,
                                                error_messages={
                                                        required: 不能为空,
                                                    })
                        pwd = fields.CharField(required=True,
                                               min_length=8,
                                               error_messages={
                                                        required: 不能为空,
                                                        min_length: 长度必须大于8
                                                    })


                    # 视图
                    def login(request):
                        if request.method == GET:
                            return render(request, app02_login.html)
                        else:
                            obj = LoginForm(request.POST)
                            # 检验提交数据是否符合规则
                            if obj.is_valid():
                                print(obj.cleaned_data)
                                # obj.cleaned_data是一个字典,form表单提交的数据
                                #{‘password‘: ‘aaaaaaaaaa‘, ‘username‘: ‘alexadfdda‘}
                                return redirect(/app02/login)
                            else:
                                return render(request, app02_login.html, {error: obj.errors})
View Code

    2.1.3 缺点

      一点提交,页面就会刷新,不能保留上次输入的数据

  2.2 Form组件实现保留上次输入方法

    2.2.1原理:利用Form组件能够生成html标签来实现

技术分享图片
                a.原理: 利用Form组件可以生成标签
                    GET:
                        obj = TestForm()
                        {{ obj.t1 }} 等效成 <input type="text" name="t1">
                    POST:
                        obj = TestForm(request.POST)
                        {{ obj.t1}} 等效成<input type="text" name="t1" value = "你提交的数据">
                    
                     总之, 前端:{{ obj.t1 }}或者 {{obj.as_p}}
                            视图:无论get还是Post都将obj传给前端
View Code

    2.2.2实例

技术分享图片
b.实例
                    # FormL类
                    class TestForm(Form):
                        t1 = fields.CharField(
                            required=True,
                            min_length=4,
                            max_length=8,
                            widget=widgets.TextInput,
                            label=用户名,
                            label_suffix=:,
                            help_text=4-8个字符,
                            initial=root
                        )
                        t2 = fields.CharField(
                            required=True,
                            min_length=8,
                            widget=widgets.PasswordInput,
                            label=密码,
                            label_suffix=:,
                            initial=password
                        )
                    #视图
                        def test(request):
                            if request.method == GET:
                                obj = TestForm()
                                return render(request, app02_test.html, {obj: obj})
                            else:
                                obj = TestForm(request.POST)
                                return render(request, app02_test.html, {obj: obj})

                    # 前端
                        <form action="/app02/test" method="POST" novalidate>
                            {% csrf_token %}
                            {{ obj.as_p }}
                            <p><input type="submit" value="提交"></p>
                        </form>


            3 补充
                有些浏览器会对Input首先做了验证,所以要先对form表单剔除掉浏览器的验证
                <form novalidate>
View Code

 

3 补充ajax实现需求:数据验证+保留上次输入的值

  3.1 原理:

    因为ajax提交数据不会刷新页面,所以主要实现数据验证(Form实现)+ 错误信息提示  

  3.2 实例

技术分享图片
- ajax提交(能验证数据 + 保留上次输入的值)
                # 模板
                    <form action="/app02/ajax_login" method="POST" id="form1">
                        {% csrf_token %}
                        <p>
                            <input type="text" name="user" placeholder="用户名">
                            <span style="color:red;">{{ error.user.0 }}</span>
                        </p>
                        <p>
                            <input type="password" name="pwd" placeholder="密码">
                            <span style="color:red;">{{ error.pwd.0 }}</span>
                        </p>
                        <p><a onclick="submitForm();">ajax提交数据</a></p>
                    </form>
                    <script src="/static/js/jquery-1.12.4.js"></script>
                    <script>
                        function submitForm() {
                            $(".temp").remove();
                            $.ajax({
                                url: /app02/ajax_login,
                                type: POST,
                                data: $(#form1).serialize(),
                                dataType: JSON,
                                success: function (arg) {
                                    console.log(arg);
                                    if(arg.status){

                                    }else{
                                        $.each(arg.msg, function (index, value) {
                                            tag = document.createElement(span);
                                            tag.innerHTML = value[0];
                                            tag.style.color = red;
                                            tag.className = "temp";
                                            $(#form1).find(input[name=" + index + "]).after(tag);

                                        })

                                    }
                                }
                            })
                        }
                    </script>

                # 视图
                def ajax_login(request):
                    if requset.method = GET:
                        return render(request, ajax_login.html)
                    else:
                        ret = {status: True, msg: None}
                        obj = LoginForm(request.POST)
                        if obj.is_valid():
                            print(obj.cleaned_data)
                        else:
                            ret[status] = False
                            ret[msg] = obj.errors
                        import json
                        return HttpResponse(json.dumps(ret))
                        # 可以返回render, 因为render实际就是调用HttpResponse
View Code

 

  

 

 


以上是关于[oldboy-django][2深入django]Form组件功能: 数据格式验证 + 保留上次输入的值(如果有很多输入项,这样正确项不必重复输入,错误项也能提示错误信息)的主要内容,如果未能解决你的问题,请参考以下文章

[oldboy-django][2深入django]老师管理--查看,添加,编辑

[oldboy-django][2深入django]初始Form组件

[oldboy-django][2深入django]点击刷新验证码

[oldboy-django][2深入django]学生管理(Form)--查看(分页)

[oldboy-django][2深入django]登录注册页面验证码

[oldboy-django][2 深入django] django一个请求的生命周期 + WSGI + 中间件