28)django-form+ajax实现验证

form+ajax实现验证

#obj.errors返回的是ErrorDict,不是字典（虽然继承字典）
#obj.errors.as_json() 返回的字符串（前端要连续反解两次）
#obj.errors.as_data()  返回原生的字典 但是返回value 是ValidationError，不能直接序列化

1）通过errors.as_data()实现数据绑定和返回，errors.as_data()  返回原生的字典 但是返回value 是ValidationError，不能直接序列化，　　通过json属性cls转换是ValidationError为字典返回。优点：前端jquery不需要JSON.parse转换两次。

2）通过errors.as_json()实现数据绑定和返回。as_json返回的是字符串。
    前端返回：需要两次JSON.parse转换（第一次：HttpResponse返回的是字符串；第二次：　　返回的error字典中的value是字符串，需要在转成字典，才可以访问）

示例1：注册信息
#两种方式1：as_data(注意view中绑定方式和模板中jqeury调用方式)
froms.py
class RegisterForm(forms.Form):
    username = fields.CharField(
            error_messages={"required": "用户名不能为空"},
            widget=widgets.Input(attrs={"class": "form-control"})
    )
    email = fields.EmailField(
           error_messages={'required':'邮箱不能为空','invalid':'邮箱格式错误'},
            widget=widgets.Input(attrs={"class": "form-control"})
    )
    password = fields.CharField(
            error_messages={"required": "密码不能为空"},
            widget=widgets.Input(attrs={"class": "form-control"})
    )
    password2 = fields.CharField(error_messages={"required": "密码不能为空"},
                                 widget=widgets.Input(attrs={"class": "form-control"}))
    check_code = fields.CharField(error_messages={"required": "验证码不能为空"},
                                  widget=widgets.Input(attrs={"class": "form-control"}))

    def clean_username(self):
        """
        验证用户存不存在
        :return:
        """
        obj = models.UserInfo.objects.filter(username=self.cleaned_data['username'])
        # 用户存在返回原来的值
        if not obj:
            return self.cleaned_data['username']
        else:
            raise ValidationError(message="用户已存在，请更换其他用户名", code="xxxx")

#views.py
from django.core.exceptions import ValidationError
class JsonCunstomEncode(json.JSONEncoder):
    def default(self, field):
        if isinstance(field,ValidationError):
            return {"code":field.code,"message":field.message}
        else:
            return json.JSONEncoder.default(self,field) 

def register(request):
    """
    注册
    :param request:
    :return:
    """
    ret={"status":False,"error":None,"data":None}
    if request.method=="GET":
        register_obj=forms.RegisterForm()
        return render(request, 'register.html',{"register_obj":register_obj})
    elif request.method=="POST":
        register_obj=forms.RegisterForm(request.POST)
        if register_obj.is_valid():
            ret["status"]=True
            ret["data"]=register_obj.cleaned_data
        else:
            ret["error"]=register_obj.errors.as_data()
        result=json.dumps(ret,cls=JsonCunstomEncode)
        #不能使用render，使用render返回数据,前端var data1=JSON.parse(arg)转换报错。可以使用HttpResponse直接返回数据
        #return render(request, 'register.html',{"result":result})
        return HttpResponse(result)

模块实现：
<div class="register">
    <div style="font-size: 25px; font-weight: bold;text-align: center;">
        用户注册
    </div>
    <form role="form" id="register_form">
        {% csrf_token %}
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" class="form-control" id="username" placeholder="请输入用户名" name="username">
            <p id="error_username"></p>
        </div>
        <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" class="form-control" id="email" placeholder="请输入邮箱" name="email">
            <p id="error_email"></p>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" class="form-control" id="password" placeholder="请输入密码" name="password">
            <p id="error_password"></p>
        </div>
        <div class="form-group">
            <label for="confirm_password">确认密码</label>
            <input type="password" class="form-control" id="password" placeholder="请输入密码" name="password2">
            <p id="error_password2"></p>
        </div>

        <div class="form-group">
            <label for="password">验证码</label>

            <div class="row">
                <div class="col-xs-7">
                    <input type="password" class="form-control" id="password" placeholder="请输入验证码" name="check_code">
                    <p id="error_check_code"></p>
                </div>
                <div class="col-xs-5">
                    <img src="/check_code.html">
                </div>
            </div>
            <p id="show_error"></p>
        </div>
        <a id="register_a" type="submit" class="btn btn-default" >下一步</a>
    </form>
    <script src="/static/js/jquery-1.12.4.js"></script>
    <script src="/static/js/jquery.cookie.js"></script>
    <script>
$("#register_a").click(
        function(){
            $.ajax({
                url:'{% url "register" %}',
                type:"POST",
                //headers: {"X-CSRFtoken":$.cookie("csrftoken")},如果是用serialize，他就csrftoken一起发送过去，所以不需要加headers
                data:$("#register_form").serialize(),
                success:function(arg){
                    var data1=JSON.parse(arg);
                    console.log(data1);
                    //#如果返回的状态为false，输出出错的内容
                    if (!data1.status){
                        //清空所有error p标签的内容
                        $("#register_form").find('p[id*=error_]').each(
                                function(){
                                    $(this).text("")
                                }
                        )
                        //根据错误信息动态绑定到p标签
                        for (var item in data1.error){
                            var tmp='#error_'+item+''
                            $(tmp).text(data1.error[item][0].message);
                        }
                        /*
                        手动绑定标签，但是会存在error中没有的信息报错
                        $("#error_username").text(data1.error["username"][0].message);
                        $("#error_email").text(data1.error.email[0].message);
                        $("#error_password").text(data1.error.password[0].message);
                        $("#error_password2").text(data1.error.password2[0].message);
                        $("#error_check_code").text(data1.error.check_code[0].message);
                        */
                    }
                    else{
                        //跳转到后台
                        location.href='{% url "base_info" %}'
                    }
                }

            })
        }
        )
    </script>

方式2：as_json

views.py
def register(request):
    """
    注册
    :param request:
    :return:
    """
    ret={"status":False,"error":None,"data":None}
    if request.method=="GET":
        register_obj=forms.RegisterForm()
        return render(request, 'register.html',{"register_obj":register_obj})
    elif request.method=="POST":
        register_obj=forms.RegisterForm(request.POST)
        if register_obj.is_valid():
            ret["status"]=True
            ret["data"]=register_obj.cleaned_data
        else:
            ret["error"]=register_obj.errors.as_json()
        result=json.dumps(ret)
        #不能使用render，使用render返回数据,前端var data1=JSON.parse(arg)转换报错。可以使用HttpResponse直接返回数据
        #return render(request, 'register.html',{"result":result})
        return HttpResponse(result)

模板：

<div class="register">
<div style="font-size: 25px; font-weight: bold;text-align: center;">
    用户注册
</div>
<form role="form" id="register_form">
    {% csrf_token %}
    <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" class="form-control" id="username" placeholder="请输入用户名" name="username">
        <p id="error_username"></p>
    </div>
    <div class="form-group">
        <label for="email">邮箱</label>
        <input type="email" class="form-control" id="email" placeholder="请输入邮箱" name="email">
        <p id="error_email"></p>
    </div>
    <div class="form-group">
        <label for="password">密码</label>
        <input type="password" class="form-control" id="password" placeholder="请输入密码" name="password">
        <p id="error_password"></p>
    </div>
    <div class="form-group">
        <label for="confirm_password">确认密码</label>
        <input type="password" class="form-control" id="password" placeholder="请输入密码" name="password2">
        <p id="error_password2"></p>
    </div>

    <div class="form-group">
        <label for="password">验证码</label>

        <div class="row">
            <div class="col-xs-7">
                <input type="password" class="form-control" id="password" placeholder="请输入验证码" name="check_code">
                <p id="error_check_code"></p>
            </div>
            <div class="col-xs-5">
                <img src="/check_code.html">
            </div>
        </div>
        <p id="show_error"></p>
    </div>
    <a id="register_a" type="submit" class="btn btn-default" >下一步</a>
</form>
<script src="/static/js/jquery-1.12.4.js"></script>
<script src="/static/js/jquery.cookie.js"></script>
<script>
    $("#register_a").click(
            function(){
                $.ajax({
                    url:'{% url "register" %}',
                    type:"POST",
                    //headers: {"X-CSRFtoken":$.cookie("csrftoken")},如果是用serialize，他就csrftoken一起发送过去，所以不需要加headers
                    data:$("#register_form").serialize(),
                    success:function(arg){
                        //第一次转换
                        var data1=JSON.parse(arg);
                        console.log(data1);
                        //#如果返回的状态为false，输出出错的内容
                        if (!data1.status){
                            //清空所有error p标签的内容
                            $("#register_form").find('p[id*=error_]').each(
                                    function(){
                                        $(this).text("")
                                    }
                            )
                            //第二次转换
                            var error_list=JSON.parse(data1.error)
                            //根据错误信息动态绑定到p标签
                            for (var item in error_list){
                                var tmp='#error_'+item+''
                                $(tmp).text(error_list[item][0].message);
                            }
                            /*
                            手动绑定标签，但是会存在error中没有的信息报错
                            $("#error_username").text(data1.error["username"][0].message);
                            $("#error_email").text(data1.error.email[0].message);
                            $("#error_password").text(data1.error.password[0].message);
                            $("#error_password2").text(data1.error.password2[0].message);
                            $("#error_check_code").text(data1.error.check_code[0].message);
                            */
                        }
                        else{
                            //跳转到后台
                            location.href='{% url "base_info" %}'
                        }
                    }

                })
            }
    )
</script>