1、Formcss
form.pyhtml
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.pyjquery
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})
register.htmlajax
<!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>
2、ModelForm數據庫
form.pydjango
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.py(add_book)bootstrap
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})
add_book.htmlapp
<!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.py(edit_book)ide
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())
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>