码迷,mamicode.com
首页 > Web开发 > 详细

Form组件验证之ajax提交数据并显示错误信息

时间:2018-03-19 13:45:56      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:turn   classname   play   toe   ati   submit   http   不能   title   

前端登陆界面(重点是js操作--接收到后台发来的错误信息怎么在页面显示出来)

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h1>用户登录</h1>
    <form id="f1" action="/login/" method="POST">
        {% csrf_token %}
        <p>
            <input type="text" name="user" />{{ obj.errors.user.0 }}
        </p>
        <p>
            <input type="password" name="pwd" />{{ obj.errors.pwd.0 }}
        </p>
        <input type="submit" value="提交" />
        <a onclick="submitForm();">提交</a>
    </form>
    <script src="/static/jquery-1.12.4.js"></script>
    <script>
        function submitForm(){
            $(.c1).remove();
            $.ajax({
                url: /ajax_login/,
                type: POST,
                data: $(#f1).serialize(),// user=alex&pwd=456&csrftoen=dfdf                dataType:"JSON",
                success:function(arg){
                    console.log(arg);
                    if(arg.status){

                    }else{
                        $.each(arg.msg,function(index,value){
                            console.log(index,value);
                            var tag = document.createElement(span);
                            tag.innerHTML = value[0];
                            tag.className = c1;
                            $(#f1).find(input[name="+ index +"]).after(tag);
                        })
                    }
                }
            })
        }
    </script>
</body>
</html>
View Code

views.py中接收数据并作验证,然后把错误信息返回给前端

技术分享图片
from django.shortcuts import render,redirect,HttpResponse
from django.forms import Form
from django.forms import fields
from django.forms import widgets

class LoginForm(Form):
    user = fields.CharField(required=True)
    pwd = fields.CharField(min_length=18)


def login(request):
    if request.method == GET:
        return render(request,login.html)
    else:
        obj = LoginForm(request.POST)
        if obj.is_valid():
            print(obj.cleaned_data)
            return redirect(http://www.baidu.com)
        return render(request,login.html,{obj: obj})


ajax接收并发送数据
def ajax_login(request): 
    import json
    ret = {status: True,msg: None}
    obj = LoginForm(request.POST)
    if obj.is_valid():
        print(obj.cleaned_data)
    else:
        # print(obj.errors) # obj.errors对象
        ret[status] = False
        ret[msg] = obj.errors
    v = json.dumps(ret)
    return HttpResponse(v)

#
# class TestForm(Form):
#     t1 = fields.CharField(
#         required=True,
#         max_length=8,
#         min_length=2,
#         error_messages={
#             ‘required‘: ‘不能为空‘,
#             ‘max_length‘: ‘太长‘,
#             ‘min_length‘: ‘太短‘,
#         }
#     )
#     t2 = fields.IntegerField(
#         min_value=10,
#         max_value=1000,
#         error_messages={
#             ‘required‘: ‘t2不能为空‘,
#             ‘invalid‘: ‘t2格式错误,必须是数字‘,
#             ‘min_value‘: ‘必须大于10‘,
#             ‘max_value‘: ‘必须小于1000‘,
#         },
#     )
#     t3 = fields.EmailField(
#         error_messages={
#             ‘required‘: ‘t3不能为空‘,
#             ‘invalid‘: ‘t3格式错误,必须是邮箱格式‘,
#         }
#     )





class TestForm(Form):
    t1 = fields.CharField(required=True,max_length=8,min_length=2,
        error_messages={
            required: 不能为空,
            max_length: 太长,
            min_length: 太短,
        }
    )
    t2 = fields.EmailField()

def test(request):
    if request.method == "GET":
        obj = TestForm()
        return render(request,test.html,{obj: obj})
    else:
        obj = TestForm(request.POST)
        if obj.is_valid():
            print(obj.cleaned_data)
        else:
            print(obj.errors)
        return render(request,test.html,{obj:obj})



class RegiterForm(Form):
    user = fields.CharField(min_length=8)
    email = fields.EmailField()
    password = fields.CharField()
    phone = fields.RegexField(139\d+)


def register(request):
    if request.method == GET:
        obj = RegiterForm()
        return render(request,register.html,{obj:obj})
    else:
        obj = RegiterForm(request.POST)
        if obj.is_valid():
            print(obj.cleaned_data)
        else:
            print(obj.errors)
        return render(request,register.html,{obj:obj})
View Code

 

Form组件验证之ajax提交数据并显示错误信息

标签:turn   classname   play   toe   ati   submit   http   不能   title   

原文地址:https://www.cnblogs.com/weigege2015/p/8601162.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!