四、数据库相关

一、forms组件

from django import forms
from django.core.exceptions import ValidationError
from app_2 import models


class MyForm(forms.Form):
    name = forms.CharField(max_length=8, min_length=3, label='用户名',
                           widget=forms.widgets.TextInput(attrs={
                               'id': 'name',
                               'class': 'form-control',
                               'placeholder': "请输入用户名",
                               'aria - describedby': "basic-addon1",
                           }),
                           error_messages={'max_length': '超出长度范围,8',
                                           'min_length': '小于长度范围,3',
                                           'required': '必填选项',
                                           })
    pwd = forms.CharField(max_length=8, min_length=3, required=True, label='密码',
                          widget=forms.widgets.PasswordInput(attrs={
                              'id': 'pwd',
                              'class': 'form-control',
                              'placeholder': "请输入密码",
                              'aria - describedby': "basic-addon1",
                          }),
                          error_messages={'max_length': '超出长度范围,8',
                                          'min_length': '小于长度范围,3',
                                          'required': '必填选项',
                                          }
                          )
    re_pwd = forms.CharField(max_length=8, min_length=3, required=True, label='确认密码',
                             widget=forms.widgets.PasswordInput(attrs={
                                 'id': 're_pwd',
                                 'class': 'form-control',
                                 'placeholder': "请重新输入密码",
                                 'aria - describedby': "basic-addon1",
                             }),
                             error_messages={'max_length': '超出长度范围,8',
                                             'min_length': '小于长度范围,3',
                                             'required': '必填选项',
                                             }
                             )
    email = forms.EmailField(label='邮箱',
                             widget=forms.widgets.EmailInput(attrs={
                                 'id': 'email',
                                 'class': 'form-control',
                                 'placeholder': "Recipient's username",
                                 'aria - describedby': "basic-addon1",
                             }),
                             error_messages={'required': '必填选项', 'invalid': '非法格式'}
                             )

    # 用户名校验，与数据库相关，检测用户名是否存在
    def clean_name(self):
        name = self.cleaned_data.get('name')
        valid = models.User.objects.filter(name=name).first()
        if valid:
            raise ValidationError('用户名已经存在')
        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('两次密码不一致')

二、视图函数

总结：

判断请求的两种方式
- if request.ajax(): #如果ajax请求
- if request,method=="POST": #如果是POST请求

from django.shortcuts import render, HttpResponse
from django.http import JsonResponse

def view_form(request):
    if request.method == 'GET':
        myform = MyForm()
        return render(request, 'forms.html', locals())

    regresponse = {'name': None, 'error': None}
    myform = MyForm(request.POST)
    if myform.is_valid():
        name = myform.cleaned_data.get('name')
        regresponse['name'] = name

        myform.cleaned_data.pop('re_pwd')
        models.User.objects.create(**myform.cleaned_data)

    else:
        print(myform.errors)
        regresponse['error'] = myform.errors
    return JsonResponse(regresponse)
    # return render(request, 'forms.html', locals())

三、前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<style>
    .line {
        padding-top: 10px;
    }
</style>
<body>
<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <form action="" method="post">
            <div class="input-group line">
                <span class="input-group-addon" id="sizing-addon1">ueser</span>
                <div>{{ myform.name }}</div>
            </div>
            <div class="input-group line">
                <span class="input-group-addon" id="basic-addon1">pwd</span>
                <div>{{ myform.pwd }}</div>
            </div>
            <div class="input-group line">
                <span class="input-group-addon" id="basic-addon1">re_pwd</span>
                <div>{{ myform.re_pwd }}</div>
            </div>
            <div class="input-group line">
                <span class="input-group-addon" id="basic-addon1">email</span>
                <div>{{ myform.email }}</div>
            </div>
        </form>

        <button id="btn" style="margin-top: 10px;float:right">ajax提交</button>
        <span class="msg"></span>
    </div>
</div>


<script>
    $('#btn').click(function () {

        var formdata = new FormData();
        formdata.append('name', $("#name").val());
        formdata.append('pwd', $("#pwd").val());
        formdata.append('re_pwd', $("#re_pwd").val());
        formdata.append('email', $("#email").val());

        $(".error_right").html("");
        $(".error_right").parent().removeClass("has-error");
        {#前台传输formdata格式数据#}
        $.ajax({
            url: 'app_2/forms/',
            type: 'post',
            data: formdata,
            contentType: false,
            processData: false,
            success: function (data) {
                console.log(data);
                console.log(typeof data);
                {#var dic = JSON.parse(data);#}

                if (data['name']) {
                    $('.msg').html('注册成功！')
                }

                else {
                    console.log(data['error']);
                    var msg = data['error'];
                    $.each(msg, function (k, v) {
                        $span = $('<span>');
                        $span.addClass('error_right').css("color", 'red');
                        $span.html(v[0]);
                        $('#' + k).after($span).parent().addClass('has-error');

                        if (k == '__all__') {
                            ("#" + k).after($span);

                        }
                    });
                }
            }


        })
    });

    $("input").blur(function () {
        console.log('onblur');
        var formdata = new FormData();
        formdata.append('name', $("#name").val());
        formdata.append('pwd', $("#pwd").val());
        formdata.append('re_pwd', $("#re_pwd").val());
        formdata.append('email', $("#email").val());

        $(".error_right").html("");
        $(".error_right").parent().removeClass("has-error");
        $.ajax({
            url: 'app_2/forms/',
            type: 'post',
            data: formdata,
            contentType: false,
            processData: false,
            success: function (data) {
                console.log(data);
                var msg = data['error'];
                $.each(msg, function (k, v) {
                    $span = $('<span>');
                    $span.addClass('error_right').css("color", 'red');
                    $span.html(v[0]);
                    $('#' + k).after($span).parent().addClass('has-error');

                    if (k == '__all__') {
                        ("#" + k).after($span);

                    }
                })
            }
        })
    });


</script>
</body>
</html>

3-1 JQuery相关操作

attr： 一个参数是获取属性的值，两个参数是设置属性值
removeAttr(属性名)：删除属性值
prop：适应于属性的返回值是布尔类型的（单选，反选，取消的例子）
removePorp: 删除属性的值

循环的两种方式：

$.each(数组/对象,function(i,v){})

$.each( { name: "John", lang: "JS" }, function(i, n){
  alert( "Name: " + i + ", Value: " + n );
});

$("div").each(function(i,v){})

$("img").each(function(){
  $(this).toggleClass("example");
});

为html结构增添内容

$span = $('<span>'); # 创建一个span对象
$span.addClass('error_right').css("color", 'red');# 为span对象增添Class和css属性
$span.html(v[0]);# 为span对象添加内容

css中的三种隐藏

1、display:none 隐藏所有内容
2、visibility:hidden 隐藏内容
3、overflow:hidden 隐藏溢出内容

区别
   visibility虽然隐藏了，但是被隐藏的内容依然占据这空间，这段隐藏了的内容却保留空间的位置会在网页中显示空白
   而display:隐藏了不占用空间

我们在注册的时候不用display：none，不然选择文件的那个功能就没有了，我们可以吧透明度

四、数据库相关

from django.db import models


# Create your models here.
class User(models.Model):
    # id字段，自增int
    id = models.AutoField(primary_key=True)
    name = models.CharField(max_length=32)
    pwd = models.CharField(max_length=32)
    email = models.EmailField()

Django - 基于 ajax数据传输 + forms组件数据校验 - 注册功能页面

一、forms组件

二、视图函数

三、前端页面

3-1 JQuery相关操作

四、数据库相关

猜你喜欢