Django forms組件

校驗字段

模板文件css

<!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>

 視圖文件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())

 模板文件python

<!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>

 渲染錯誤信息

視圖文件jquery

# 第一步:先要繼承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())

 模板文件ajax

<!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
相關文章
相關標籤/搜索