Form验证、Ajax提交验证、Form保留输入内容

 

Form 组件:
 From 验证
   需要对请求数据做验证
   获取到数据然后进行验证
   用户提交数据进行校验，定义规则
     - form 提交 (提交时会刷新，失去上次内容)
     - ajax 提交 (提交时默认不会刷新，上次内容自动保留)

 记住上次提交内容，刷新不会消失


Form 类下 内置字段：
 Field:
 -- 验证：
   required=True  是否允许为空
   error_messages=None     错误信息{'required':'不能为空'，'invalid':'格式错误'}

 -- 生成HTML标签：
   widget  HTML插件（自动生成html标签） 指定生成什么样的HTML标签：select、text、input
   label=None  用于生成label标签或显示内容
   initial=None    初始值
   help_text=''    帮助信息(在标签旁显示)
   show_hidden_initial=False   是否在当前插件后面再加一个隐藏的且具有默认值的插件(可用于检验两次输入是否一致)
   validators=[]   自定义验证规则
   localize=False  是否支持本地化
   disabled=False  是否可以编辑
   label_suffix=None   label内容后缀

 

 

 

1、views.py

 

from django.shortcuts import render,redirect,HttpResponse
from django.forms import Form
from django.forms import fields

# 用于改变from添加html标签的样式
from django.forms import widgets

# Create your views here.


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.changed_data)
            return redirect("http://www.baidu.com")
        else:
            return render(request,'login.html',{'obj':obj})

def ajax_login(request):
    import json
    ret = {'status':True,'msg':None}
    obj = LoginForm(request.POST)
    if obj.is_valid():
        print(obj.cleaned_data)
        return HttpResponse(obj.changed_data)
    else:

        ret['status'] = False
        ret['msg'] = obj.errors

        error = json.dumps(ret)
        return HttpResponse(error)

class TestForm(Form):
    t1 = fields.CharField(required=True,
                          label='label-->t1',
                          max_length=8,
                          min_length=2,
                          error_messages={
                              'required':'不能为空,',
                              'max_length':'不大于8',
                              'min_length':'不小于2',
                          })

    t2 = fields.IntegerField(
        required=True,

        widget=None,
        label='用户名',
        disabled=True,
        label_suffix='--->t2',
        initial='666',
        help_text='=======',

        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格式错误，必须为邮箱格式',
    #
    #     }
    # )

    # t4 = fields.URLField()
    # t5 = fields.RegexField('139\d+',error_messages={'invalid':'必须139开头'})

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')



# Form 生成html 来 提交 保留上一次内容
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})



class ClassFrom(Form):
    title = fields.RegexField('全栈\d+')


from app01 import models
def class_list(request):
    cls_list = models.Classes.objects.all()
    return render(request,'class_list.html',{'cls_list':cls_list})

def add_class(request):
    if request.method == 'GET':
        obj = ClassFrom()
        return render(request,'add_class.html',{'obj':obj})
    else:
        obj = ClassFrom(request.POST)
        if obj.is_valid():
            obj.cleaned_data
            models.Classes.objects.create(**obj.cleaned_data)
            return redirect('/class_list/')

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

def edit_class(request,nid):
    if request.method == 'GET':
        row = models.Classes.objects.filter(id=nid).first()
        obj = ClassFrom({'title':row.title})

        # 默认不验证规则
        # obj = ClassFrom(initial={'title': '12314'})

        return render(request,'edit_class.html',{'nid':nid,'obj':obj})
    else:
        obj = ClassFrom(request.POST)
        if obj.is_valid():
            models.Classes.objects.filter(id=nid).update(**obj.cleaned_data)
            return redirect('/class_list/')
    return render(request,'edit_class.html',{'nid':nid,'obj':obj})


# 学生表单(Form添加html下拉框标签，并数据库取值添加默认值)
class StudentForm(Form):
    # 插件订制生成html的样式，前提是导入bootstrap.min.js
    name = fields.CharField(min_length=2,max_length=6,
                            widget=widgets.TextInput(attrs={'class':'form-control'}))
    email = fields.CharField()
    age = fields.IntegerField(min_value=18,max_value=25)
    cls_id = fields.IntegerField(
        # widget=widgets.Select(choices=[(1,'上海'),(2,'北京')])
        # 上下得到内容格式一致
        widget = widgets.Select(choices=models.Classes.objects.values_list('id','title'),attrs={'class':'form-control'})

    )

def add_student(request):
    if request.POST == 'GET':
        obj = StudentForm()
        return render(request,'add_student.html',{'obj':obj})
    else:
        obj = StudentForm(request.POST)
        if obj.is_valid():
            models.Student.objects.create(**obj.cleaned_data)
            return  redirect('/student_list/')
        return render(request,'add_student.html',{'obj':obj})

 

 

2、url

 

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

urlpatterns = [
    url('admin/', admin.site.urls),
    url(r'^login/', views.login),
    url(r'^ajax_login/', views.ajax_login),
    url(r'^test/', views.test),
    url(r'^register/', views.register),
    url(r'^class_list/', views.class_list),
    url(r'^add_class/', views.add_class),
    url(r'^edit_class/(\d+)/', views.edit_class),

]

 

 

3、html

class_list

 

<body>
<h1>班级列表</h1>
<div><a href="/add_class/">添加</a></div>

<ul>
    {% for n in cls_list %}
        <li>{{ n.title }} <a href="/edit_class/{{ n.id }}">编辑</a></li>

    {% endfor %}

</ul>




</body>

 

add_class

 

<body>
<h1>添加班级</h1>
<form method="POST" action="/add_class/" novalidate>
    {% csrf_token %}
    {{ obj.title }}{{ obj.errors.title.0 }}
    <input type="submit" value="提交">

</form>



</body>

 

edit_class

 

<body>
<h1>编辑班级</h1>
<form method="POST" action="/edit_class/{{ nid }}/">
    {% csrf_token %}
    {{ obj.title }}{{ obj.errors.title.0 }}
    <input type="submit" value="提交">

</form>
</body>

 

 

register.html

<body>
// novalidate 阻止浏览器进行规则验证
<form action="/register/" method="POST" novalidate>
{% csrf_token %}



        <p>{{ obj.user }}{{ obj.errors.user.0 }}</p>
    {{ obj.email }}{{ obj.errors.email.0 }}<br>
    {{ obj.password }}{{ obj.errors.password.0 }}<br>
    {{ obj.phone }}{{ obj.errors.phone.0 }}


    <input type="submit" value="提交">

</form>



</body>

login

<body>
<h1>用户登录</h1>

<form id="f1" action="/login/" method="POST">
    {% csrf_token %}
<p><input type="text" name="user"></p> {{ obj.errors.user.0 }}
<p><input type="password" name="pwd"></p>{{ obj.errors.pwd.0 }}
<p><input type="submit" value="登录"></p>

<a onclick="submitForm()">提交</a>


</form>

<script src="/static/jquery-3.3.1.js"></script>
<script>
    function submitForm() {
        $.ajax({
            url: "/ajax_login/",
            type: "POST",
            // 自动把form里的input等csrf_token打包获取到。拼接成字符串：user=xxx&&pwd=xxx&csrftoken=xxx
            data: $('#f1').serialize(),
            dataType:'JSON',
            success:function (arg) {
                $('.c1').remove()
                if (arg.status == false){
                    $.each(arg.msg,function (key,value) {
                        console.log(key,value)
                        var tag = document.createElement('span')
                        tag.innerHTML = value[0]
                        tag.className = 'c1'
                        $('#f1').find('input[name="'+key+'"]').after(tag)
                    })
                }
                
            }
        })
    }
</script>



</body>

test

<body>

// as_p 在内部去对象里把所有字段标签都生成

<form action='/test/' method="POST">
    {% csrf_token %}
{{ obj.as_p }}


    <input name="t1" type="text">
    <input type="submit" value="提交">

</form>
</body>

 

 

4、models

 

from django.db import models

class Classes(models.Model):
    title = models.CharField(max_length=32)

class Student(models.Model):
    name = models.CharField(max_length=32)
    email = models.CharField(max_length=32)
    age = models.IntegerField(max_length=32)
    cls = models.ForeignKey('Classes',on_delete=True)


class Teacher(models.Model):
    tname = models.CharField(max_length=32)
    c2t = models.ManyToManyField('Classes')