首页 > 代码库 > python_way day14 HTML-day5 （form表单验证，）

python_way day14 HTML-day5 （form表单验证，）

2024-08-13 20:49:23   234人阅读

python-way day19 

1. dJango的form表单验证

 

 

 一，django表单验证功能

1、django验证基础：

技术分享
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>django form</title></head><body>    <div>        <input type="text" placeholder="用户名" name="user">    </div>    <div>        <input type="password" placeholder="密码" name="password">    </div>    <input type="button" value="提交"></body><script src="/statics/js/jquery-3.1.0.min.js"></script><script src="/statics/js/my_js.js"></script><script>    $("div input").VelidForm("input[type=button]");   //使用jquery extend    //把所有div下面的input作为筛选传过去，并且把点击的按钮作为参数传过去</script></html>
django_form.html
技术分享
(function ($) {    $.fn.extend({        VelidForm: function (button) {       //扩展方法            var inps = this;                 //所有的用户输入框            $(button).click(function () {    //点击事件绑定                var input_dict = {};         //定义一个空字典                $(inps).each(function () {   //循环所有input                    var v = $(this).val();    //获取value                    var k = $(this).attr("name");   //获取key                    input_dict[k] = v;             //给字典赋值                    });                $.ajax({                                 //发送ajax请求                    url: "/django_form/",                    type: "POST",                    data: input_dict,                    dataType: "json",                    //回调函数                    success: function (data) {                        //ajax提交成功调用这个函数                    },                    error:function () {                        //ajax失败自动调用这个函数                    }                    })            })        }    });})(jQuery);
my_js.js
#定义验证规则from django import forms      #需要倒入继承django给我们提供的formsclass LoginForm(forms.Form):    user = forms.CharField(required=True)   #required = True 输入不能为空    password = forms.CharField(required=True)def django_form(request):    if request.method == "POST":        obj = LoginForm(request.POST)  #request.POST 里面有用户输入的所有信息        ret = obj.is_valid()           #这样就验证了用户输入是否为空        print(ret)                      #这样就能看到了返回值：True False
　　　　 if ret:
            print(obj.clean())   #拿到正确的输入值
       else:
    　　　　　print(obj.errors)　　#拿到错误值
    return render(request, "django_form.html")

只要有一项没有填写内容，ret就是False： 并且obj.errors 会把错误获取到 （password没有填写内容） 

技术分享

注意：匹配规则名称要统一

views：

技术分享

django_form.html

技术分享

 

2、获取错误信息

首先我们看到了我们获取到的错误信息时一个<ul><li>的类型，那么就说明了这个error里面应该有一个str方法，这个方法输出的就是这个类型，那我们来来看一下这个error

的类型，看看他的本质！

技术分享

是一个错误字典类型：

技术分享
 else:            from django.forms.utils import ErrorDict            print(type(obj.errors))    return render(request, "django_form.html")====================================class ErrorDict(dict):    """    A collection of errors that knows how to display itself in various formats.    The dictionary keys are the field names, and the values are the errors.    """    def as_data(self):        return {f: e.as_data() for f, e in self.items()}    def as_json(self, escape_html=False):        return json.dumps({f: e.get_json_data(escape_html) for f, e in self.items()})    def as_ul(self):        if not self:            return ‘‘        return format_html(            ‘<ul class="errorlist">{}</ul>‘,            format_html_join(‘‘, ‘<li>{}{}</li>‘, ((k, force_text(v)) for k, v in self.items()))        )    def as_text(self):        output = []        for field, errors in self.items():            output.append(‘* %s‘ % field)            output.append(‘\n‘.join(‘  * %s‘ % e for e in errors))        return ‘\n‘.join(output)    def __str__(self):        return self.as_ul()
ErrorDict

 

可以看到里面有很多的方法，默认str输出的是al_ul,如果我们想要as_json，我们也可以获取到 

def django_form(request):    if request.method == "POST":        obj = LoginForm(request.POST)  #request.POST 里面有用户输入的所有信息        ret = obj.is_valid()           #这样就验证了用户输入是否为空        if ret:            print(obj.clean())        else:            print(obj.errors.as_json())   #这样我们就获得了json格式的错误提示    return render(request, "django_form.html")

技术分享

#定义验证规则from django import forms      #需要倒入继承django给我们提供的formsimport jsonclass LoginForm(forms.Form):    user = forms.CharField(required=True)   #required = True 输入不能为空    password = forms.CharField(required=True)def django_form(request):    if request.method == "POST":        obj = LoginForm(request.POST)  #request.POST 里面有用户输入的所有信息        ret = obj.is_valid()           #这样就验证了用户输入是否为空        result = {"status":False,"message":None}        if ret:            result["status"] = True            print(obj.clean())        else:            error_str = obj.errors.as_json()            print(obj.errors.as_json())            result["message"] = json.loads(error_str)        return HttpResponse(json.dumps(result))    return render(request, "django_form.html")

前端js

技术分享
(function ($) {    $.fn.extend({        VelidForm: function (button) {       //扩展方法            var inps = this;                 //所有的用户输入框            $(button).click(function () {    //点击事件绑定                var input_dict = {};         //定义一个空字典                $(inps).each(function () {   //循环所有input                    var v = $(this).val();    //获取value                    var k = $(this).attr("name");   //获取key                    input_dict[k] = v;             //给字典赋值                    });                $(‘.error-msg‘).remove();                $.ajax({                    url: "/django_form/",                    type: "POST",                    data: input_dict,                    dataType: "json",   //这样指定了数据的格式是json                    //回调函数                    success: function (data) {                        //ajax提交成功调用这个函数                        if(data.status){                            location.href = "/index/";                        }else{                        $.each(data.message, function (k,v) {   //拿到的是一个字典，循环这个字典，获取它的k和v                            //{"user": [{"code": "required", "message": "This field is required."}],                            // "password": [{"code": "required", "message": "This field is required."}]}                            console.log(k,v[0].message);  //获取message内容                            var tag = document.createElement(‘span‘);   //dom创建标签                            tag.className = ‘error-msg‘;                //添加样式                            tag.innerText = v[0].message;               //插入内容                            // $(‘inps[name="‘ + k + ‘"]‘).after(tag)   字符串的拼接(字符窜拼接的例子，这里没有用到)                            $(inps).each(function () {                  //循环传过来的input标签                                if($(this).attr("name") == k ){          //如果这个当前循环到的标签的name = 上面我们循环的k则在他后面添加一个错误信息                                    $(this).after(tag)                                }                            })                        });                        // JSON.parse(data) 这样?可以转换成dict格式                     }                    },                    error:function () {                        //ajax失败自动调用这个函数                    }                    })            })        }     });})(jQuery);
前端 js - 使用默认的message信息

 

python_way day14 HTML-day5 （form表单验证，）


联系
我们