web框架-（六）Django补充---form表单验证

1. 常规html页面的form表单验证

常规页面中,如果想实现对表单中用户输入信息的数据验证,需要配合Ajax来实现.

使用前我们先来熟悉下函数参数:request,其中包含的意义:

request.path               除去了域名和端口的访问路径，
request.get_host       域名+端口信息
request.get_full_path()   所有路径，包含传递的参数
requets.is_secure()     是否使用https进行链接

Django中的form库:每一个邦定Form实体都有一个errors属性，它为你提供了一个字段与错误消息相映射的字典表。可以这么定义:

>>> f = ContactForm({'subject': 'Hello', 'message': ''})
>>> f.errors
{'message': [u'This field is required.']}

实现验证的必要条件:

在views.py中定义一个继承了父类forms.Form的子类；
在页面中需要设置name属性；
后台验证时使用LoginForm(request.POST)获取表单确认结果；
获取结果后,使用LoginForm(request.POST).is_valid()判断是否有误(True为无错误,False为有错误)；
用户页面提交时,需要将输入内容拼接为字典形式,并且属性name的值要与views.py 中定义的一致；

1）创建forms类：

class LoginForm(forms.Form):
    user = forms.CharField(required=True, error_messages={'required': '用户名不能为空.'})
    pwd = forms.CharField(required=True,
                          min_length=6,
                          max_length=10,
                          error_messages={'required': '密码不能为空.', 'min_length': "至少6位"})

    num = forms.IntegerField(error_messages={'required': '数字不能空.', 'invalid': '必须输入数字'})

    phone = forms.CharField(validators=[mobile_validate, ], )

2）views函数处理：

def login(request):
    if request.method == 'POST':
        result = {'status': False, 'message': None}
        obj = LoginForm(request.POST)
        ret = obj.is_valid()
        if ret:
            print(obj.clean())
            result['status'] = True
        else:
            from django.forms.utils import ErrorDict
            print(type(obj.errors), obj.errors.as_json())
            # print(obj.errors)
            error_str = obj.errors.as_json()
            result['message'] = json.loads(error_str)
        return HttpResponse(json.dumps(result))
    return render(request, 'login.html')

3）login.htm文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .error_msg{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <input type="text" name="user" />
        </div>
        <div>
            <input type="password" name="pwd" />
        </div>
        <input type="button" value="提交" onclick="DoSubmit();" />
    </div>
    <script src="/static/jquery-1.12.4.js"></script>
    <script>
        function DoSubmit(){
            $('.error_msg').remove();
            var input_dict = {};
            $('input').each(function(){
                var v = $(this).val();
                var n = $(this).attr('name');
                input_dict[n] = v;
            });
            console.log(input_dict);
            $.ajax({
                url: '/login/',
                type: 'POST',
                data: input_dict,
                dataType:'json',
                success: function (result) {
                    if(result.status){
                        location.href = '/index/'
                    }else {
                        $.each(result.message,function (k,v) {
                            console.log(k,v[0].message);
                            var tag = document.createElement('span');
                            tag.className = 'error_msg';
                            tag.innerText = v[0].message;
                            $('input[name="'+k +'"]').after(tag);
                            
                        })

                    }

                }
            })
        }
    </script>
</body>
</html>