django 的form组件(验证原理的流程）--2

Posted 2020-10-26

功能

- 用户数据提交进行验证
    - Form提交：提交后，内容会清空，会刷新浏览器
        1、通过写类（继承Forms）
            字段名 == xx.filed（）这个字段本质就是验证正则，正则表达式
            字段名 == xx.filed（）这个字段本质就是验证正则，正则表达式
            字段名 == xx.filed（）这个字段本质就是验证正则，正则表达式
        2、obj = logForm(request.post)
        3、obj.is_valid()
        4、obj.cleaned_data
        5、obj.errors
        - Ajax：提交后，会保留上次内容，不会刷新浏览器（如需需要手动操作）
- 保留上次内容

is_valid的原理

from django.forms import Form,fields
class LoginFrom(Form):
    username = fields.CharField(min_length=6,max_length=12,required=True,
                                error_messages={
                                    ‘required‘:‘用户不能为空‘,
                                    ‘min_length‘:‘输入的太短了‘,
                                    ‘max_length‘:‘太长了‘,
                                },
                                )
    password1 = fields.CharField(max_length=8,required=True)
    password2 = fields.CharField(max_length=8,required=True)
def login(request):
    if request.method == "GET":
        return render(request,‘login.html‘)
    else:
        obj = LoginFrom(request.POST)
        if obj.is_valid():

下面介绍下 is_valid的原理
我们知道username和password1和password2这些字段都是正则表达式，当LoginForm实例化成功，其实就是在把里面的username和password字段再做

self.field = {
    ‘username’：正则表达式（fields.CharField(min_length=6,max_length=12,required=Tru），
    ‘password1’：正则表达式，
    xxx：xxx
}

当做了上面的步骤后，然后就是开始循环这个self.field。

flag= True
errors
cleaned_data
for k,v in self.fields.items():
    #k就是username，v就是正则表达式
    input_value = request.post.get(k)#因为这里设置的字段名字是和前端的name是一样的
    正则和表达式和input_value
    flag  = False
return flag

通过上面的流程 我们就能判断得到is_valid()是否为真或者假

Form和Ajax的提交验证

ajax提交数据后，填入的内容不会丢失，页面不会刷新，

<form id="fid" action="/login.html/" method="post">
    <p><input type="text" name="username">用户名</p>{{ obj.errors.username.0 }}
    <p><input type="password" name="password">密码</p>{{ obj.errors.username.0 }}
{#    <p><input type="password" name="password2">确认密码</p>{{ error }}#}
    <p><input type="submit" value="提交"></p>
{#    <p><input type="submit" onclick="ajaxclick()">ajax提交</p>#}
    <a onclick="ajaxclick();">ajax提交</a>
</form>
<script src="/static/jquery-1.12.4.js"></script>
<script>
    function ajaxclick() {
        $.ajax({
            url:‘/ajaxlogin/‘,
            type:‘POST‘,
            data:$(‘#fid‘).serialize(),
            success:function (args) {
                console.log(args);
            }
        })
    }
</script>

class LoginFrom(Form):
    username = fields.CharField(min_length=6,max_length=12,required=True,
                                error_messages={
                                    ‘required‘:‘用户不能为空‘,
                                    ‘min_length‘:‘输入的太短了‘,
                                    ‘max_length‘:‘太长了‘,
                                },
                                )
    password = fields.CharField(max_length=6,required=True)

def login(request):
    if request.method == "GET":
        return render(request,‘login.html‘)
    else:
        obj = LoginFrom(request.POST)
        if obj.is_valid():
            return redirect(‘http://www.baidu.com‘)
            # pp1 = obj.cleaned_data[‘password1‘]
            # # pp2 = obj.cleaned_data[‘password2‘]
            # if pp1 != pp2:
            #     return render(request,‘login.html‘,{‘error‘:‘两次内容不一样‘})
            # else:
            #     print(obj.cleaned_data)#字典类型
            #     return redirect(‘http://www.baidu.com‘)
        else:
            return render(request,‘login.html‘,{‘obj‘:obj})

def ajaxlogin(request):
    obj = LoginFrom(request.POST)
    if obj.is_valid():
        print(obj.cleaned_data)
    else:
        print(obj.errors)
    return HttpResponse(‘......‘)#这里也可以返回render，因为render代码最后还是httpresponse返回的，一般这里是返回一个json.doumps的数据

ajax提交显示错误信息

obj.errors，是一个对象，我们要想把这个对象里面的数据传到前端，好的方法是通过json转化成字典，然后就可以传到前端。根据这个思路我们要导入json模块，优化有设置一个字典，方便前端查找

def ajaxlogin(request):
    import json
    ret = {‘status‘:True,‘msg‘:None}#设置了一个字典类型的数据ret
    obj = LoginFrom(request.POST)
    if obj.is_valid():
        print(obj.cleaned_data)
    else:
        ret[‘status‘] = False
        ret[‘msg‘] = obj.errors#这是一个对象
        print(obj.errors)
    v = json.dumps(ret)#转换为字典类型
    return HttpResponse(v)

通过后端的传给来的v数据，我们前端需要在success后，执行一些把错误信息提取出来，然后显示到页面上

<script>
    function ajaxclick() {
        $(‘.c1‘).remove();
        $.ajax({
            url:‘/ajaxlogin/‘,
            type:‘POST‘,
            data:$(‘#fid‘).serialize(),
            dataType:‘JSON‘,#自动解压json格式，要添加这个参数
            success:function (args) {
                console.log(args);
                if (args.status){#args就是那边传过来的v，由于里面包含了字段status和其他字段

                }else {
                    $.each(args.msg,function (index,value) {#通过循环msg字典，
                        var tag = document.createElement(‘span‘);
                        tag.className=‘c1‘;#添加一个class，为了上面的清除数据，如果没有这一行和上面的一行remove，发现报错信息会一直在后面显示，是一个累加的形式
                        tag.innerHTML = value[0];#不管有几个，还是取第一个值
                        $("#fid").find(‘input[name="‘+ index +‘"]‘).after(tag);#这里使用到了拼接字符串
                    })
                }
            }
        })
    }
</script>

前端，msg的样式