话不多说，先放图
左边的导航就不放代码了，需要再问
(1)视图模板 (2)路由（urls.p）
(3)views.py
# GET：向服务器 获取 数据
# POST：向服务器 提交 数据
# 添加学生
def add_stu(request):
# 当浏览器在访问该网址，其实就是向服务器获取数据，所以打开这个页面
if request.method == "GET":
return render(request, 'add_stu.html')
else:
# 获取提交的学生信息：get获取 input 的 name 名
name = request.POST.get('name')
sex = request.POST.get('sex')
chinese = request.POST.get('chinese')
math = request.POST.get('math')
english = request.POST.get('english')
total = float(chinese) + float(math) + float(english)
# 添加到数据库
StudentInfo.objects.create(name=name, sex=sex, chinese=chinese, math=math, english=english, total=total)
# redirect提交完成后自动跳转，跳转回你的页面列表
# return redirect("跳转别人的网站地址")
return redirect('/stu/list/')
(4)models.py
你的模型要先搞好才能方便表单需要添加什么，模型跟我不一样也没事，后面的正则对就行
# 在应用student的model.py中，定义StudentInfo模型，该模型继承models.Model类
class StudentInfo(models.Model):
name = models.CharField(max_length=32, verbose_name='姓名')
sex = models.CharField(max_length=10, verbose_name='性别')
chinese = models.FloatField(verbose_name='语文成绩', default=0)
math = models.FloatField(verbose_name='数学成绩', default=0)
english = models.FloatField(verbose_name='英语成绩', default=0)
total = models.FloatField(verbose_name='总分', default=0)
（5）在add_list.html上添加分页html
用ul>li,方便css的编写，
.you是右边的页面的大盒子，漏出底色（灰），区分我没有给出的左边导航栏.zuo
.container是包着整个表单，同时把页面居中,漏出底色（白）
.add_stu是包着整个表单，限制宽度
添加学生信息
返回学生列表
{# method: 规定用于发送表单数据的 HTTP 方法。#}
{# action: 当提交表单时，发送表单数据到名为 "" 的文件（处理输入）：#}
（6）css模板
具体的宽度，位置需要自己定制，我设置的时候，用了flex布局，没有左边的nav，就失去作用了，所以可以去掉
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
em,
i {
font-style: normal;
}
li {
list-style: none;
}
img {
border: 0;
vertical-align: middle;
}
button {
cursor: pointer;
}
a {
color: #bdbdbd;
text-decoration: none;
}
.fda:hover {
transform: scale(1.1);
}
button,
input {
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "5B8B4F53", sans-serif;
border: 0;
outline: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
form {
display: inline;
}
input[type=number] {
padding-left: 17px;
margin-right: 5px;
width: 200px;
height: 37px;
color: #3d464d;
border: 1px solid #cdd1d5;
border-radius: 10px;
}
input[type=submit] {
padding: 8px 20px;
background-color: #5596e4;
border: 0;
font-size: 13px;
border-radius: 10px;
color: #fff;
cursor: pointer;
}
.button {
display: inline-block;
margin: 0 20px;
text-align: center;
font-size: 13px;
border-radius: 10px;
}
.button a {
display: inline-block;
padding: 8px 20px;
color: #fff;
}
body {
-webkit-font-smoothing: antialiased;
display: flex;
font-size: 15px;
color: #636363;
background-color: #f5f5f5;
font-family: "microsoft yahei","Helvetica Neue", Helvetica, Arial, sans-serif;
}
.hide,
.none {
display: none;
}
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0;
}
.clearfix {
*zoom: 1;
}
.zuo {
flex: 1;
height: 750px;
text-align: center;
background-color: #222324;
}
.you {
position: relative;
flex: 6;
margin: 0 30px;
height: 740px;
background-color: #f5f5f5;
}
.container {
margin-top: 30px;
height: 700px;
background-color: #fff;
overflow: hidden;
}
.add_stu {
margin: 50px auto 0;
width: 900px;
border: 1px solid #ccc;
}
.add_stu h3 {
height: 40px;
background-color: #ececec;
padding: 0 10px;
font-weight: 400;
line-height: 40px;
font-size: 18px;
border-bottom: 1px solid #ccc;
}
.add_stu h3 a {
float: right;
font-size: 14px;
color: #636363;
}
.add_stu em {
color: #c81623;
}
.add_form {
margin: 60px auto 0;
padding-left: 32px;
width: 550px;
height: 420px;
}
.add_form li {
margin-bottom: 25px;
}
.add_form li label:nth-child(1) {
display: inline-block;
width: 80px;
height: 36px;
line-height: 36px;
text-align: right;
}
#name {
padding-left: 17px;
margin-right: 5px;
width: 200px;
height: 37px;
color: #3d464d;
border: 1px solid #cdd1d5;
border-radius: 10px;
}
.add_form li .sub {
margin-left: 130px;
width: 145px;
}
#male, #famale {
margin-left: 25px;
margin-right: 5px;
width: 14px;
height: 14px;
}
.success {
color: #40b83f;
font-size: 13px;
}
.error {
color: #df3033;
font-size: 13px;
}
.icon {
width: 23px;
}
（7）js模板（记得引入jq）
这里，我用了jq，定义一个regadd函数，里面用了blur失去焦点事件验证表单输入是否正确，判断状态，提示是否输入正确
- 函数不需要变（里面的图片去iconfont-阿里巴巴矢量图标库找），传参可以根据需要你的需求，做你自己的，只需要去找对应的正则表达式
- 其他的看我代码的解析（解析写的巨详细，有问题call我）
$(function() {
// 正则，按照需要输入
var regname = /^([u4e00-u9fa5]{2,20}|[a-zA-Z.s]{2,20})$/; // 姓名的正则表达式[只能输入中文、英文]
var regscore = /^([0-9]{1,2}$)|(^[0-9]{1,2}.[0-9]{1,2}$)|100$/; //成绩的正则表达式
// 判断穿进的input表单的内容是否符合正则表达式
regadd($("#name"),regname)
regadd($("#chinese"),regscore)
regadd($("#math"),regscore)
regadd($("#english"),regscore)
function regadd(ele, add) {
$(ele).blur(function() {
// add.test(this.value) add是正则表达式，是用test函数正则验证，this.value是传进来的表单input的输入的值，正确返回true，错误返回false
if (add.test(this.value)) {
// 失去焦点就去掉 error 这个css类，添加success类，表示验证成功
// $(this).next()是获取当前表单input下面的span标签
$(this).next().removeClass("error");
$(this).next().addClass("success");
// right.png可以去阿里图标库找（颜色：#39ba36）
// html(): 是在当前表单input下面的span标签里面【替换】下面的标签内容
$(this).next().html(' 恭喜您输入正确');
// 验证成功就去掉最后提交表单的禁止点击的属性
// 如果有的输入表单没有验证成功会禁用，这个在后面点击提交事件中写了
$('.sub').removeAttr('disabled')
} else {
$(this).next().removeClass("success");
$(this).next().addClass("error");
// error.png可以去阿里图标库找（颜色：#e12d2c）
$(this).next().html(' '+ $(this).prev().children().html() +'格式不正确，请重新输入')
}
})
}
// 判断是否所有表单都正确
// 设置属性：attr("属性", "属性值") .val:获取当前表单的输入值
// 点击提交表单触发
$(".sub").click(function() {
if (regname.test($('#name').val()) && regscore.test($('#chinese').val()) && regscore.test($('#math').val()) && regscore.test($('#english').val())) {
// 如果上面四个表单验证成功，点击提交的时候触发去掉禁用提交属性
$('.sub').removeAttr('disabled')
} else if ($('#name').val() === '' || $('#chinese').val() === '' || $('#math').val() === '' || $('#english').val() === '') {
// 如果上面四个表单没有输入，点击提交的时候触发加上禁用提交属性
$(this).attr('disabled', 'disabled')
} else {
$(this).attr('disabled', 'disabled')
}
})
})
如果没有给你帮助，我很抱歉，如果你最后成功了，恭喜你
