Thinkphp5学习010-项目案例-添加学生模板设计
Thinkphp5学习010-项目案例-添加学生模板设计
在导航中我们想通过点击“添加学生”
应该是出现一个添加学生的表单界面，我们可以输入内容并进行提交，我们要对表单中的内容进行验证是否为空
因为在学生列表导航nav.html文件中我们已经设计了一个方法是add()
所以在view\student\中添加add.html模板文件
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>添加学生</title>
<{include file="head.html"}>
</head>
<body>
<div class="container">
<{include file="nav.html"}>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">添加学生</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" action="{:url('do_add')}" method="post">
<div class="form-group">
<label for="no" class="col-sm-2 control-label">学号</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="no" name="no" placeholder="学号">
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="姓名">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="sex" value="男" checked> 男
</label>
<label class="radio-inline">
<input type="radio" name="sex" value="女"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">年龄</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="age" name="age" placeholder="年龄">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">提交</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
<script>
$(function () {
$('form').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
no: {
validators: {
notEmpty: {
message: '学号不能为空'
}
}
},
name: {
validators: {
notEmpty: {
message: '姓名不能为空'
}
}
},
age: {
validators: {
notEmpty: {
message: '年龄不能为空'
}
}
}
}
});
});
</script>效果如下：
===今天的学习到此===
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-01-03，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
