Django—Form、ModelForm

1、Form

 

form.py

from django import forms
from django.core.exceptions import ValidationError
from django.contrib.auth.models import User
import re


# 定義手機號驗證規則
def phone_validate(value):
    phone = re.compile(r'^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$')
    if not phone.match(value):
        raise ValidationError("手機號格式錯誤")


class RegForm(forms.Form):
    username = forms.CharField(
        label="用戶名",
        min_length=6,
        initial="請輸入用戶名",
        error_messages={
            'required': "不能爲空",
            "invalid": "格式錯誤",
            "min_length": "用戶名最短6位"
        },
        widget=forms.widgets.TextInput(attrs={"class": "form-control"})
    )

    password = forms.CharField(
        label="密碼",
        min_length=8,
        widget=forms.widgets.PasswordInput(attrs={"class": "form-control"}, render_value=True),
        error_messages={
            "required": "不能爲空",
            "min_length": "不能少於8位"
        }
    )

    re_password = forms.CharField(
        label="密碼",
        min_length=8,
        widget=forms.widgets.PasswordInput(attrs={"class": "form-control"}, render_value=True),
        error_messages={
            "required": "不能爲空",
            "min_length": "不能少於8位"
        }
    )

    email = forms.EmailField(
        label="郵箱",
        widget=forms.widgets.TextInput(attrs={"class": "form-control"}),
        error_messages={
            'required': "不能爲空",
            "invalid": "格式錯誤",
        }
    )

    # radio
    gender = forms.fields.ChoiceField(
        choices=((1,"男"),(0,"女"),),
        label="性別",
        initial=1,
        widget=forms.widgets.RadioSelect()
    )

    # 單選select
    se_hobby = forms.fields.ChoiceField(
        label="select單選愛好",
        choices=((1,"籃球"),(2,"網球"),(3,"羽毛球"),),
        # initial=1,
        widget=forms.widgets.Select()
    )

    # 多選select
    se_hobbys = forms.fields.MultipleChoiceField(
        label="select多選愛好",
        choices=((1, "籃球"), (2, "網球"), (3, "羽毛球"),),
        initial=[1,],
        widget=forms.widgets.SelectMultiple()
    )

    # 單選checkbox
    keep_username = forms.fields.ChoiceField(
        label="記住用戶名",
        # initial="checked",
        widget=forms.widgets.CheckboxInput()
    )

    # 多選checkbox
    ch_hobbys = forms.fields.MultipleChoiceField(
        label="checkbox多選愛好",
        choices=((1, "籃球"), (2, "網球"), (3, "羽毛球"),),
        # initial=[1, 2],
        widget=forms.widgets.CheckboxSelectMultiple()
    )

    # 手機號
    phone = forms.fields.CharField(
        validators=[phone_validate, ],
        error_messages={
            "required": "手機不能爲空"
        },
        widget=forms.widgets.TextInput(attrs={"class": "form-control"})
    )

    # # 批量增長樣式
    # def __init__(self, *args, **kwargs):
    #     super(RegForm, self).__init__(*args, **kwargs)
    #     for field in iter(self.fields):
    #         self.fields[field].widget.attrs.update({
    #             'class': 'form-control'
    #         })
    # 
    #     # 動態獲取數據庫的choice數據
    #     self.fields["gender"].choices = User.objects.all().values_list("id", "gender")


    # 重寫全局的鉤子函數，對確認密碼作校驗
    def clean(self):
        password = self.cleaned_data.get("password")
        re_password = self.cleaned_data.get("re_password")
        if re_password and re_password != password:
            self.add_error("re_password", ValidationError("兩次輸入的密碼不一致"))
        else:
            return self.cleaned_data

    # 定義局部鉤子，驗證用戶名是否被註冊
    def clean_username(self):
        username = self.cleaned_data.get("username")
        is_exist = User.objects.filter(username=username)
        if is_exist:
            self.add_error("username", ValidationError("用戶名已被註冊"))
        else:
            return username

    # 定義局部鉤子，驗證郵箱是否可用
    def clean_email(self):
        email = self.cleaned_data.get("email")
        is_exist = User.objects.filter(email=email)
        if is_exist:
            self.add_error("email", ValidationError("郵箱不可用"))
        else:
            return email

View Code

view.py

def reg(request):
    form_obj = RegForm()
    if request.method == "POST":
        ret = {"status": 0, "msg": ""}
        form_obj = RegForm(request.POST)
        if form_obj.is_valid():
            # form_obj.cleaned_data.pop("re_password")
            # print(form_obj.cleaned_data)
            # User.objects.create_user(**form_obj.cleaned_data)
            ret["msg"] = "/login"
            return JsonResponse(ret)
        else:
            # print(form_obj.errors)
            ret["status"] = 1
            ret["msg"] = form_obj.errors
            return JsonResponse(ret)
    return render(request, 'register.html', {"forms_obj": form_obj})

View Code

register.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv='Content-type' content='text/htm'>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <script src="/static/jquery-3.3.1.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3 reg-form">
            <h3 class="text-center">Register</h3><br>
            <form class="form-horizontal" novalidate  method="post"
                  enctype="multipart/form-data">
                {% csrf_token %}
                <div class="form-group ">
                    <label for='{{ forms_obj.username.id_for_label }}'
                           class="col-sm-2 control-label">{{ forms_obj.username.label }}</label>
                    <div class="col-sm-8">
                        {{ forms_obj.username }}
                        <span class="help-block">{{ forms_obj.username.errors.0 }}</span>
                        <span id="ss" class="help-block"></span>
                    </div>
                </div>

                <div class="form-group ">
                    <label for='{{ forms_obj.password.id_for_label }}'
                           class="col-sm-2 control-label">{{ forms_obj.password.label }}</label>
                    <div class="col-sm-8">
                        {{ forms_obj.password }}
                        <span class="help-block">{{ forms_obj.password.errors.0 }}</span>
                    </div>
                </div>

                <div class="form-group ">
                    <label for='{{ forms_obj.re_password.id_for_label }}'
                           class="col-sm-2 control-label">{{ forms_obj.re_password.label }}</label>
                    <div class="col-sm-8">
                        {{ forms_obj.re_password }}
                        <span class="help-block">{{ forms_obj.re_password.errors.0 }}</span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="{{ forms_obj.email.id_for_label }}"
                           class="col-sm-2 control-label">{{ forms_obj.email.label }}</label>
                    <div class="col-sm-8">
                        {{ forms_obj.email }}
                        <span class="help-block">{{ forms_obj.email.errors.0 }}</span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="{{ forms_obj.gender.id_for_label }}"
                           class="col-sm-2 control-label">{{ forms_obj.gender.label }}</label>
                    <div class="col-sm-8">
                        {{ forms_obj.gender }}
                        <span class="help-block">{{ forms_obj.gender.errors.0 }}</span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="{{ forms_obj.se_hobby.id_for_label }}"
                           class="col-sm-2 control-label">{{ forms_obj.se_hobby.label }}</label>
                    <div class="col-sm-8">
                        {{ forms_obj.se_hobby }}
                        <span class="help-block">{{ forms_obj.se_hobby.errors.0 }}</span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="{{ forms_obj.se_hobbys.id_for_label }}"
                           class="col-sm-2 control-label">{{ forms_obj.se_hobbys.label }}</label>
                    <div class="col-sm-8">
                        {{ forms_obj.se_hobbys }}
                        <span class="help-block">{{ forms_obj.se_hobbys.errors.0 }}</span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="{{ forms_obj.keep_username.id_for_label }}"
                           class="col-sm-2 control-label">{{ forms_obj.keep_username.label }}</label>
                    <div class="col-sm-8">
                        {{ forms_obj.keep_username }}
                        <span class="help-block">{{ forms_obj.keep_username.errors.0 }}</span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="{{ forms_obj.ch_hobbys.id_for_label }}"
                           class="col-sm-2 control-label">{{ forms_obj.ch_hobbys.label }}</label>
                    <div class="col-sm-8">
                        {{ forms_obj.ch_hobbys }}
                        <span class="help-block">{{ forms_obj.ch_hobbys.errors.0 }}</span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="{{ forms_obj.phone.id_for_label }}"
                           class="col-sm-2 control-label">{{ forms_obj.phone.label }}</label>
                    <div class="col-sm-8">
                        {{ forms_obj.phone }}
                        <span class="help-block">{{ forms_obj.phone.errors.0 }}</span>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-6">
                        <button id="reg_submit" type="button" class="btn btn-success btn-block">註冊</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    $("#reg_submit").click(function () {
        var formData = new FormData();
        formData.append("username", $("#id_username").val());
        formData.append("password", $("#id_password").val());
        formData.append("re_password", $("#id_re_password").val());
        formData.append("gender", $("input[name='gender']:checked").val());
        formData.append("se_hobby", $("#id_se_hobby").val());
        formData.append("se_hobbys", $("#id_se_hobbys").val());
        formData.append("keep_username", $("#id_keep_username").prop("checked"));
        formData.append("ch_hobbys", $("#id_ch_hobbys input[name='ch_hobbys']:checked").val());
        formData.append("phone", $("#id_phone").val());
        formData.append("csrfmiddlewaretoken", $("input[name='csrfmiddlewaretoken']").val());
        $.ajax({
            url:'/register/',
            type:'post',
            processData: false,
            contentType: false,
            data:formData,
        }).done(function (data) {
            if (data.status){
                $.each(data.msg,function (k,v) {
                    $("#id_"+k).next("span").text(v[0]).parent().parent().addClass("has-error")
                })
            } 
            else {
                window.location.href = data.msg
            }
        })
    });

    $("form input").focus(function () {
        $(this).next("span").text("").parent().parent().removeClass("has-error");
    });
    $("form select").focus(function () {
        $(this).next("span").text("").parent().parent().removeClass("has-error");
    });
    $("form input[name='ch_hobbys']").focus(function () {
        $(this).parents("ul").next("span").text("").parent().parent().removeClass("has-error");
    })
</script>
</body>
</html>

View Code

 

2、ModelForm

 

form.py

from booktest.models import *
from django.forms import widgets as wds


class BookForm(forms.ModelForm):
    class Meta:
        model = BookInfo
        fields = "__all__"
        labels = {
            "btitle": "書名",
            "bpub_date": "發佈日期",
            "bcomment": "評論量",
            "bread": "閱讀量"
        }

        widgets = {
            "btitle": wds.TextInput(attrs={"class": "form-control"}),
            "bpub_date": wds.TextInput(attrs={"class": "form-control", "type": "date"}),
            "bread": wds.TextInput(attrs={"class": "form-control"}),
            "bcomment": wds.TextInput(attrs={"class": "form-control"})
        }

        error_messages = {
            "btitle": {"required":"不能爲空",},
            "bpub_date": {"required":"不能爲空",},
            "bcomment": {"required":"不能爲空",},
            "bread": {"required":"不能爲空",}
        }

View Code

view.py(add_book)

def add_book(request):
    form_obj = BookForm()
    if request.method == "POST":
        ret = {"status": 0, "msg": ""}
        form_obj = BookForm(data=request.POST)
        if form_obj.is_valid():
            print(form_obj.cleaned_data)
            form_obj.save()
            ret["msg"] = '/bookform'
            return JsonResponse(ret)
        else:
            ret["status"] = 1
            ret["msg"] = form_obj.errors
            return JsonResponse(ret)
    return render(request, 'add_book.html', {"forms_obj": form_obj})

View Code

add_book.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv='Content-type' content='text/htm'>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <script src="/static/jquery-3.3.1.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3 reg-form">
            <h3 class="text-center"></h3><br>
            <form class="form-horizontal" novalidate  method="post"
                  enctype="multipart/form-data">
                {% csrf_token %}
                <div class="form-group ">
                    <label for='{{ forms_obj.btitle.id_for_label }}'
                           class="col-sm-2 control-label">{{ forms_obj.btitle.label }}</label>
                    <div class="col-sm-8">
                        {{ forms_obj.btitle }}
                        <span class="help-block">{{ forms_obj.btitle.errors.0 }}</span>
                        <span id="ss" class="help-block"></span>
                    </div>
                </div>

                <div class="form-group ">
                    <label for='{{ forms_obj.bpub_date.id_for_label }}'
                           class="col-sm-2 control-label">{{ forms_obj.bpub_date.label }}</label>
                    <div class="col-sm-8">
                        {{ forms_obj.bpub_date }}
                        <span class="help-block">{{ forms_obj.bpub_date.errors.0 }}</span>
                    </div>
                </div>

                <div class="form-group ">
                    <label for='{{ forms_obj.bcomment.id_for_label }}'
                           class="col-sm-2 control-label">{{ forms_obj.bcomment.label }}</label>
                    <div class="col-sm-8">
                        {{ forms_obj.bcomment }}
                        <span class="help-block">{{ forms_obj.bcomment.errors.0 }}</span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="{{ forms_obj.bread.id_for_label }}"
                           class="col-sm-2 control-label">{{ forms_obj.bread.label }}</label>
                    <div class="col-sm-8">
                        {{ forms_obj.bread }}
                        <span class="help-block">{{ forms_obj.bread.errors.0 }}</span>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-6">
                        <button id="reg_submit" type="button" class="btn btn-success btn-block">註冊</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    $("#reg_submit").click(function () {
        var formData = new FormData();
        formData.append("btitle", $("#id_btitle").val());
        formData.append("bpub_date", $("#id_bpub_date").val());
        formData.append("bcomment", $("#id_bcomment").val());
        formData.append("bread", $("#id_bread").val());
        formData.append("csrfmiddlewaretoken", $("input[name='csrfmiddlewaretoken']").val());
        $.ajax({
            url:'/bookform/',
            type:'post',
            processData: false,
            contentType: false,
            data:formData,
        }).done(function (data) {
            if (data.status){
                $.each(data.msg,function (k,v) {
                    $("#id_"+k).next("span").text(v[0]).parent().parent().addClass("has-error")
                })
            }
            else {
                window.location.href = data.msg
            }
        })
    });

    $("form input").focus(function () {
        $(this).next("span").text("").parent().parent().removeClass("has-error");
    });
</script>
</body>
</html>

View Code

view.py(edit_book)

def editbook(request, book_id):
    edit_book = BookInfo.objects.get(id=book_id)
    if request.method == "POST":
        form_obj = BookForm(request.POST, instance=edit_book)
        if form_obj.is_valid():
            form_obj.save()     # edit_book.update(request.POST)
            return redirect('/add_book')
    else:
        form_obj = BookForm(instance=edit_book)
        return render(request, 'edit_book.html', locals())

View Code

edit_book.html

<body>
<form method="post">
    {% csrf_token %}
    {% for field in form_obj %}
    <div>
    {{ field.label }}
    {{ field }}<span>{{ field.errors.0 }}</span>
    </div>
    {% endfor %}
    <input type="submit">
</form>

</body>

View Code