DjangoForm 提交验证

发布于2019-08-06 11:14 阅读(773) 评论(0) 点赞(0) 收藏(4)

用户提交数据的验证

1.创建模版                     -- class LoginForm(forms.Form):....
2.将请求交给模版，创建一个对象    -- obj = LoginForm(request.POST)
3.进行验证                     -- obj.is_valid()
4.获取正确的信息                -- obj.clean()
5.获取错误的信息                -- obj.errors

Form 验证

创建一个项目 django_form 和一个应用 app01

创建一个 static 文件夹，放入 jquery.min.js

修改 settings.py 文件

注释下面语句
    #'django.middleware.csrf.CsrfViewMiddleware',

在文件最后添加
STATICFILES_DIRS=[
    os.path.join(BASE_DIR, "static"),
]

在 urls.py 内容如下

from django.contrib import admin
from django.urls import path
from app01 import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('login.html', views.login),
]

在 views.py 中修改


class LoginForm(forms.Form):
    # 定义元素，需要跟前端提交的名字一致，error_messages 自定义错误信息
    user = forms.CharField(min_length=6, error_messages={"required": '用户名不能为空', 'min_length': '用户长度不能小于6'})
    email = forms.EmailField(error_messages={"required": '邮箱不能为空', 'invalid': '邮箱格式错误'})


def login(request):
    if request.method == 'GET':
        # 自动生成 input 标签
        obj = LoginForm()
        return render(request, 'login.html', {'oo': obj})
    elif request.method == 'POST':
        # 获取 post 提交过来的所有值
        obj = LoginForm(request.POST)
        # 判断值是否正确
        if obj.is_valid():
            # 获取正确的值
            value_dict = obj.clean()
            print(value_dict)
        else:
            # 如果错误，错误信息通过 obj 返回前端
            pass

        return render(request, 'login.html', {'oo': obj})

在 templates 文件夹下添加 login.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>Form提交数据</h1>
    <form method="post" action="/login.html">
        <p>
            {{ oo.user }}
            <!-- 通过 oo.errors.user.0 获取错误信息 -->
            <span>{{ oo.errors.user.0 }}</span>
        </p>
        <p>
             {{ oo.email }}
            <span>{{ oo.errors.email.0 }}</span>
        </p>
        <p>
            <input type="text" name="pwd" placeholder="密码">
        </p>
        <input type="submit" value="提交">
        <input id="ajax_submit" type="button" value="Ajax提交">
    </form>
    <script src="/static/jquery.min.js"></script>
    <script>
        $(function () {
            $('#ajax_submit').click(function () {
                $.ajax({
                    url: "/login.html",
                    data: {user:'root', email: 'root@live.com', pwd: '123456'},
                    type: 'POST',
                    success:function (arg) {
                        console.log(arg)
                    }
                })
            })
        })
    </script>
</body>
</html>

当输入的邮箱不正确时，在高级浏览器下后显示如下结果

Ajax 验证

在 urls.py 上修改

    path('login_ajax.html', views.login_ajax),

在 views.py 上修改

def login_ajax(request):
    if request.method == 'GET':
        return render(request, 'login_ajax.html')
    elif request.method == 'POST':
        ret = {'status': True, 'error': None, 'data': None}
        obj = LoginForm(request.POST)
        if obj.is_valid():
            print(obj.clean())
        else:
            ret['status'] = False
            ret['error'] = obj.errors.as_data()  # {'email': [ValidationError(['邮箱格式错误'])], 'user': [ValidationError(['用户长度不能小于6'])]}

        return HttpResponse(json.dumps(ret, cls=JsonCustomEncoder))
# 邮箱格式和用户名长度都不正常时，返回给浏览器的是：{"error": {"email": [{"message": "\u90ae\u7bb1\u683c\u5f0f\u9519\u8bef", "code": "invalid"}], "user": [{"message": "\u7528\u6237\u957f\u5ea6\u4e0d\u80fd\u5c0f\u4e8e6", "code": "min_length"}]}, "data": null, "status": false}



# 定义编码类JsonCustomEncoder并重写实例的default函数，对特殊类型进行处理，其余类型继续使用父类的解析。
from django.core.validators import ValidationError
class JsonCustomEncoder(json.JSONEncoder):
    def default(self, field):
        # 使用 isinstance() 函数来判断 field 是否是 ValidationError 类型
        if isinstance(field, ValidationError):
            # field 为 ['邮箱格式错误'] 和 ['用户长度不能小于6']
            # field.code 为 min_length 和 invalid
            # field.message 为 邮箱格式错误 和 用户长度不能小于6
            return {'code': field.code, 'message': field.message}
        else:
            return json.JSONEncoder.default(self, field)

添加 login_ajax.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error-msg{
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <h1>Ajax提交数据</h1>
    <form id="f1" >
        <p>
            <input id="u" type="text" name="user" placeholder="用户名">
        </p>
        <p>
            <input id="e" type="text" name="email" placeholder="邮箱">
        </p>
        <p>
            <input id="p" type="text" name="pwd" placeholder="密码">
        </p>
        <input id="ajax_submit" type="button" value="Ajax提交">
    </form>
    <script src="/static/jquery.min.js"></script>
    <script>
        $(function () {
            $('#ajax_submit').click(function () {
                $.ajax({
                    url: "/login_ajax.html",
                    data: $('#f1').serialize(),   //将表单数据表单序列化（key1=value1&key2=value2…）后提交
                    type: 'POST',
                    success:function (arg) {
                        $('.error-msg').remove();
                        var v1 = JSON.parse(arg);
                        console.log(v1);
                        if(!v1.status){
                            var error_obj = v1.error;
                            $.each(error_obj, function (k,v) {
                                // k: user 或 email
                                // v: [{}{}{},]
                                var tag = document.createElement('span');
                                tag.className = 'error-msg';
                                tag.innerHTML = v[0].message;
                                $("input[name='"+ k +"']").after(tag);
                            })
                        }else {
                            location.href = "/index.html"
                        }
                    }
                })
            })
        })
    </script>
</body>
</html>