zoukankan      html  css  js  c++  java
  • Django forms组件

    校验字段

    模板文件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <form action="" method="post">
    
        <p>用户名: <input type="text" name="name"></p>
    {#    <p>密码: <input type="text" name="pwd"></p>#}
        <p>确认密码: <input type="text" name="re_pwd"></p>
        <p>邮箱: <input type="text" name="email"></p>
        <input type="submit" value="提交">
    
    </form>
    </body>
    </html>
    

     视图文件

    from django import forms
    from django.forms import widgets

    class MyForm(forms.Form):
    # 定义一个属性,可以用来校验字符串类型
    # 限制最大长度是8,最小长度是3
    name = forms.CharField(max_length=8, min_length=3, label='用户名',
    error_messages={'max_length': '最长是8', 'min_length': '最短是3', 'required': '这个必须填'},)
    pwd = forms.CharField(max_length=8, min_length=3, required=True, label='密码',
    error_messages={'max_length': '最长是8', 'min_length': '最短是3', 'required': '这个必须填'},)
    re_pwd = forms.CharField(max_length=8, min_length=3, required=True, label='确认密码',
    error_messages={'max_length': '最长是8', 'min_length': '最短是3', 'required': '这个必须填'},)
    # 校验是否是邮箱格式
    email = forms.EmailField(label='邮箱', error_messages={'required': '这个必须填', 'invalid': '不符合邮箱格式'})


    数据从前端传过来,校验 要校验的字典,可以多参数,但是不能少 def index_form(request): # 生成对象时(实例化),需要传入要校验的数据(字典) if request.method=='GET': return render(request,'indxe.html') elif request.method=='POST': print(request.POST) myform=MyForm(request.POST) # is_valid如果是true表示校验成功,反之,校验失败 if myform.is_valid(): # 校验通过的数据 print(myform.cleaned_data) return HttpResponse('校验成功') else: print(myform.cleaned_data) # 错误信息,它是一个字典 print(myform.errors) print(myform.errors.as_data()) print(type(myform.errors)) from django.forms.utils import ErrorDict return HttpResponse('校验失败')

     渲染模板

    视图文件

    from django.forms import widgets
    from django.forms import widgets
    from django.core.exceptions import ValidationError
    
     name = forms.CharField(widget=widgets.TextInput(attrs={'class': 'form-control'}))
     pwd = forms.CharField(widget=widgets.PasswordInput(attrs={'class': 'form-control'}))
    
    widgets 就是用来渲染的
    
    class MyForm(forms.Form):
        # 定义一个属性,可以用来校验字符串类型
        # 限制最大长度是8,最小长度是3
        name = forms.CharField(max_length=8, min_length=3, label='用户名',
                               error_messages={'max_length': '最长是8', 'min_length': '最短是3', 'required': '这个必须填'},
                               widget=widgets.TextInput(attrs={'class': 'form-control'}))
        pwd = forms.CharField(max_length=8, min_length=3, required=True, label='密码',
                              error_messages={'max_length': '最长是8', 'min_length': '最短是3', 'required': '这个必须填'},
                              widget=widgets.PasswordInput())
        re_pwd = forms.CharField(max_length=8, min_length=3, required=True, label='确认密码',
                              error_messages={'max_length': '最长是8', 'min_length': '最短是3', 'required': '这个必须填'},
                              widget=widgets.PasswordInput())
        # 校验是否是邮箱格式
        email = forms.EmailField(label='邮箱', error_messages={'required': '这个必须填', 'invalid': '不符合邮箱格式'})
    
    
    渲染模板
    def index_form(request):
        # 生成对象时(实例化),需要传入要校验的数据(字典)
        myform=MyForm()
        if request.method=='GET':
            return render(request,'indxe2.html',locals())
    

     模板文件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <hr>
    <h1>第一种方式</h1>
    <form action="" method="post" >
        <p>用户名: {{ myform.name }}</p>
        <p>密码: {{ myform.pwd }}</p>
        <p>邮箱: {{ myform.email }}</p>
        <input type="submit" value="提交">
    
    </form>
    <hr>
    <h1>第二种方式(for循环form对象,建议用这种)</h1>
    <form action="" method="post" >
        {% for foo in myform %}
            <p>{{ foo.label }}:{{ foo }}</p>
        {% endfor %}
    
        <input type="submit" value="提交">
    </form>
    <h1>第三种方式(不建议用)</h1>
    <form action="" method="post" >
    
    {#    {{ myform.as_p }}#}
        {{ myform.as_ul }}
        <input type="submit" value="提交">
    </form>
    </body>
    </html>
    

     渲染错误信息

    视图文件

    # 第一步:先要继承Form
    from django import forms
    from django.forms import widgets
    from django.core.exceptions import ValidationError
    
    
    # 写一个类
    class MyForm(forms.Form):
        # 定义一个属性,可以用来校验字符串类型
        # 限制最大长度是8,最小长度是3
        name = forms.CharField(max_length=8, min_length=3, label='用户名',
                               error_messages={'max_length': '最长是8', 'min_length': '最短是3', 'required': '这个必须填'},
                               widget=widgets.TextInput(attrs={'class': 'form-control'}))
        pwd = forms.CharField(max_length=8, min_length=3, required=True, label='密码',
                              error_messages={'max_length': '最长是8', 'min_length': '最短是3', 'required': '这个必须填'},
                              widget=widgets.PasswordInput())
        re_pwd = forms.CharField(max_length=8, min_length=3, required=True, label='确认密码',
                              error_messages={'max_length': '最长是8', 'min_length': '最短是3', 'required': '这个必须填'},
                              widget=widgets.PasswordInput())
        # 校验是否是邮箱格式
        email = forms.EmailField(label='邮箱', error_messages={'required': '这个必须填', 'invalid': '不符合邮箱格式'})
    
        # aa = forms.CharField(label='选择', error_messages={'required': '这个必须填', 'invalid': '不符合邮箱格式'},widget=widgets.CheckboxInput())
        def clean_name(self):
            # self:当前form对象
            name = self.cleaned_data.get('name')
            if name.startswith('sb'):
                # 失败,抛异常
                raise ValidationError('不能以傻逼开头')
            # 正常,把name返回
            return name
    
        def clean(self):
            pwd=self.cleaned_data.get('pwd')
            re_pwd=self.cleaned_data.get('re_pwd')
            if pwd==re_pwd:
                return self.cleaned_data
            else:
                raise ValidationError('两次密码不一致')
    
    
    # 渲染错误信息
    from app01 import models
    def index_form(request):
        # 生成对象时(实例化),需要传入要校验的数据(字典)
        if request.method == 'GET':
            myform = MyForm()
        elif request.method == 'POST':
            myform = MyForm(request.POST)
            if myform.is_valid():
                print(myform.cleaned_data)
    
                myform.cleaned_data.pop('re_pwd')
                models.User.objects.create(**myform.cleaned_data)
                return redirect('http://www.baidu.com')
            else:
                all_error = myform.errors.get('__all__')
                if all_error:
                    all_error=all_error[0]
    
        return render(request, 'indxe3.html', locals())
    

     模板文件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
        <title>Title</title>
    </head>
    <body>
    
    <h1>第二种方式(for循环form对象,建议用这种)</h1>
    <form action="" method="post" novalidate>
        {% for foo in myform %}
            <p>{{ foo.label }}:{{ foo }} <span>{{ foo.errors.0 }}</span></p>
        {% endfor %}
    
        <input type="submit" value="提交"><span>{{ all_error }}</span>
    </form>
    </body>
    </html>
    
    errors存放着错误信息
    

     局部钩子

        def clean_name(self):
            # self:当前form对象
            name = self.cleaned_data.get('name')
            if name.startswith('sb'):
                # 失败,抛异常
                raise ValidationError('不能以傻逼开头')
            # 正常,把name返回
            return name
    
    clean_name  是拿上面定义的name 返回的信息也是放到 errors字典内 键是name 对应的值内
    

     全局钩子

        def clean(self):
            pwd=self.cleaned_data.get('pwd')
            re_pwd=self.cleaned_data.get('re_pwd')
            if pwd==re_pwd:
                return self.cleaned_data
            else:
                raise ValidationError('两次密码不一致')
    
    全局钩子  错误的信息存放在 errors 字典内的 __all__ 键对应的值内
    
    from django.shortcuts import render,HttpResponse
    import json
    from django.http import JsonResponse
    # Create your views here.
    from django import forms
    from django.forms import widgets
    from django.core.exceptions import ValidationError
    from app01 import models
    
    
    class myForm(forms.Form):
        name = forms.CharField(max_length=12, min_length=3, label='用户名',
                               error_messages={'max_length': '最长是12', 'min_length': '最短是3', 'required': '必填'},
                               widget=widgets.TextInput(attrs={'class': 'form-control','id':'usr'}))
        pwd = forms.CharField(max_length=16, min_length=3, label='密码',
                              error_messages={'max_length': '最长16', 'min_length': '最短是3', 'required': '必填'},
                              widget=widgets.PasswordInput(attrs={'class': 'form-control','id':'pwd'}))
        re_pwd = forms.CharField(max_length=16, min_length=3, label='再次输入密码',
                                 error_messages={'max_length': '最长16', 'min_length': '最短是3', 'required': '必填'},
                                 widget=widgets.PasswordInput(attrs={'class': 'form-control','id':'pwd2'}))
        email = forms.EmailField(label='邮箱',
                                 error_messages={'required': '必填', 'invalid': '不符合邮箱格式'},
                                 widget=widgets.EmailInput(attrs={'class': 'form-control','id':'email'}))
    
        def clean_name(self):
            name=self.cleaned_data.get("name")
            # print(name)
            account=models.User.objects.filter(name=name).first()
            if account:
                raise ValidationError('该用户名已存在')
            return name
    
        def clean(self):
            pwd = self.cleaned_data.get('pwd')
            # print(pwd)
            re_pwd = self.cleaned_data.get('re_pwd')
            if pwd == re_pwd:
                return self.cleaned_data
            else:
                raise ValidationError('两次密码不一致')
    
    
    def index(request):
        if request.method == 'GET':
            myform = myForm()
            return render(request, 'index.html', locals())
        elif request.method == 'POST':
            # print(request.POST)
            # print(request.body)
            ajax1=json.loads(request.body.decode('utf-8'))
            # print(ajax1)
            myform = myForm(ajax1)
            if myform.is_valid():
                data = myform.cleaned_data
                data.pop('re_pwd')
                models.User.objects.create(**data)
                return HttpResponse('注册成功')
            else:
                return JsonResponse(myform.errors)
    
    def index_usr(request):
        print(request.body)
        ajax2 = json.loads(request.body.decode('utf-8'))
        print(ajax2)
        myform = myForm(ajax2)
        if myform.is_valid():
            return HttpResponse(json.dumps('可以使用的用户名'))
        else:
            return JsonResponse(myform.errors)
    注册功能页面(手撸)views层
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">
        <title>Title</title>
    </head>
    <body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3" id="msg">
                <form action="" method="post" novalidate>
                    {% for foo in myform %}
                        <p id="{{ foo.auto_id }}">{{ foo.label }}:{{ foo }}</p>
                    {% endfor %}
    
                </form>
                <button type="submit" id="btn">注册</button>
                <span id="error"></span>
            </div>
        </div>
    </div>
    
    </body>
    <script src="/static/jquery-3.3.1.js"></script>
    <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script>
        $('#btn').click(function () {
            var pos_data = {
                'name': $('#usr').val(),
                'pwd': $('#pwd').val(),
                're_pwd': $('#pwd2').val(),
                'email': $('#email').val()
            };
            var pos = JSON.stringify(pos_data);
            $.ajax({
                url: '/index/',
                type: 'post',
                data: pos,
                contentType: 'application/json',
                dataType: 'json',
                success: function (data) {
                    for (let i in data) {
                        var error_msg2 = $('<span class="pull-right" style="color: red" id="msg_error" >' + data[i] + '</span>');
                        if (error_msg2) {
                            $('#msg_error').remove()
                        }
                        $('#id_' + i + '').append(error_msg2);
                        if (data['__all__']) {
                            var error_msg = $('<span class="pull-right" style="color: red" id="er_pwd2">' + data['__all__'] + '</span>');
                            if ($('#er_pwd2')) {
                                $('#msg_error').remove()
                                $('#er_pwd2').remove()
                            }
                            $('#id_re_pwd').append(error_msg)
                        } else {
                            $('#er_pwd2').remove()
                        }
                        break;
                    }
                    alert(data)
                }
            })
        });
        $('#usr').on('blur', function () {
            var pos_data2 = {
                'name': $('#usr').val(),
            };
            var pos2 = JSON.stringify(pos_data2);
            $.ajax({
                url: '/index_usr/',
                type: 'post',
                data: pos2,
                contentType: 'application/json',
                dataType: 'json',
                success: function (data) {
                    console.log(data)
                    li='name'
                    if (li in data) {
                        var error_msg2 = $('<span class="pull-right" style="color: red" id="msg_error" >' + data['name'] + '</span>');
                        if (error_msg2) {
                            $('#msg_error').remove()
                        }
                        $('#id_name').append(error_msg2);
                    }else {
                        var error_msg2 = $('<span class="pull-right" style="color: red" id="msg_error" >可以使用的用户名 </span>');
                        if (error_msg2) {
                            $('#msg_error').remove()
                        }
                        $('#id_name').append(error_msg2);
                    }
                }
            })
        })
    </script>
    </html>
    注册功能页面(手撸) index.html
    from django.db import models
    
    # Create your models here.
    class User(models.Model):
        name=models.CharField(max_length=32)
        pwd=models.CharField(max_length=32)
        email=models.EmailField()
    models.py
  • 相关阅读:
    android个版本对应的SDK level,最新包括android10.0
    SQL语句 存在就更新不存在就插入
    forward和sendredirect
    JavaBean
    Cookie单点登录跨域问题
    JSP
    JSP内置对象
    Spring学习笔记
    事务
    AOP实现方式
  • 原文地址:https://www.cnblogs.com/layerluo/p/9998524.html
Copyright © 2011-2022 走看看