结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./assets/lib/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="./assets/lib/toastr/toastr.min.css" />
<link
rel="stylesheet"
href="./assets/lib/validator/bootstrapValidator.min.css"
/>
<link rel="stylesheet" href="./assets/css/student.css" />
</head>
<body>
<!-- 添加学员 弹窗内容部分 start -->
<div
class="modal fade"
id="addModal"
tabindex="-1"
aria-labelledby="addModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addModalLabel">录入新学员</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<form action="" class="container add-form">
<div class="row mb-3">
<label class="col-sm-2 col-form-label-sm">姓名</label>
<div class="col-sm-10">
<input
type="text"
class="form-control form-control-sm"
name="name"
placeholder="学员姓名"
/>
</div>
</div>
<div class="row mb-3">
<label class="col-sm-2 col-form-label-sm">年龄</label>
<div class="col-sm-10">
<input
type="text"
class="form-control form-control-sm"
name="age"
placeholder="学员年龄"
/>
</div>
</div>
<div class="row mb-3">
<label class="col-sm-2 col-form-label-sm">组号</label>
<div class="col-sm-10">
<select class="form-select form-select-sm" name="group">
<option selected value="">请选择一个组号</option>
<option value="1">1组</option>
<option value="2">2组</option>
<option value="3">3组</option>
<option value="4">4组</option>
<option value="5">5组</option>
<option value="6">6组</option>
<option value="7">7组</option>
<option value="8">8组</option>
<option value="9">9组</option>
<option value="10">10组</option>
<option value="11">11组</option>
<option value="12">12组</option>
<option value="13">13组</option>
<option value="14">14组</option>
<option value="15">15组</option>
</select>
</div>
</div>
<div class="row mb-3">
<label class="col-sm-2 col-form-label-sm">性别</label>
<div class="col-sm-10 self-valign">
<div class="col-sm-1 form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="sex"
value="男"
checked
/>
<label class="form-check-label">男</label>
</div>
<div class="col-sm-1 form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="sex"
value="女"
/>
<label class="form-check-label">女</label>
</div>
</div>
</div>
<div class="row mb-3">
<label class="col-sm-2 col-form-label-sm">手机</label>
<div class="col-sm-10">
<input
type="text"
class="form-control form-control-sm"
name="phone"
placeholder="手机号"
/>
</div>
</div>
<div class="row mb-3">
<label class="col-sm-2 col-form-label-sm">薪资</label>
<div class="col-sm-5">
<input
type="text"
class="form-control form-control-sm"
name="salary"
placeholder="期望薪资"
/>
</div>
<div class="col-sm-5">
<input
type="text"
class="form-control form-control-sm"
name="truesalary"
placeholder="实际薪资"
/>
</div>
</div>
<div class="row mb-3">
<label class="col-sm-2 col-form-label-sm">籍贯</label>
<div class="col-sm-3">
<select class="form-select form-select-sm" name="province">
<!-- <option selected value="">--省--</option> -->
</select>
</div>
<div class="col-sm-3">
<select class="form-select form-select-sm" name="city">
<!-- <option selected value="">--市--</option> -->
</select>
</div>
<div class="col-sm-3">
<select class="form-select form-select-sm" name="county">
<!-- <option selected value="">--县--</option> -->
</select>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-2"></div>
<div class="col-sm-10">
<button
type="submit"
class="btn btn-primary btn-sm btnAddStudent"
>
确认添加
</button>
<button type="reset" class="btn btn-secondary btn-sm">
重置
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- 添加学员 弹窗内容部分 end -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid header">
<h1>学员管理</h1>
<!-- 添加学生信息按钮 -->
<button
type="button"
class="btn btn-primary btn-sm modal-dialog-centered btnAddStu"
>
添加学员
</button>
</div>
</nav>
<!-- table-striped隔行换色 -->
<table class="table table-striped">
<colgroup>
<col width="7%" />
<col width="8%" />
<col width="7%" />
<col width="7%" />
<col width="7%" />
<col width="10%" />
<col width="10%" />
<col width="10%" />
<col width="24%" />
<col width="10%" />
</colgroup>
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">姓名</th>
<th scope="col">年龄</th>
<th scope="col">性别</th>
<th scope="col">组号</th>
<th scope="col">联系电话</th>
<th scope="col">期望薪资</th>
<th scope="col">实际薪资</th>
<th scope="col">籍贯</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<th scope="row">10</th>
<td>张三</td>
<td>20</td>
<td>女</td>
<td>1</td>
<td>13261266666</td>
<td>120000</td>
<td>14000</td>
<td>河北省承德市围场县</td>
<td>
<button type="button" class="btn btn-primary btn-sm">修改</button>
<button type="button" class="btn btn-danger btn-sm">删除</button>
</td>
</tr> -->
</tbody>
</table>
<script src="./assets/lib/jquery-3.6.0.min.js"></script>
<script src="./assets/lib/bootstrap/bootstrap.min.js"></script>
<script src="./assets/lib/toastr/toastr.min.js"></script>
<script src="./assets/lib/validator/bootstrapValidator.min.js"></script>
<script src="./assets/lib/axios.js"></script>
<script src="./assets/utils/toastr.js"></script>
<script src="./assets/utils/request.js"></script>
<script src="./assets/js/student.js"></script>
</body>
</html>
省市级
// 实现数据的验证
function test() {
return {
fields: {
name: {
validators: {
// 指定自定义的验证规则
notEmpty: {
message: '姓名不能为空'
},
stringLength: {
min: 2,
max: 10,
message: '姓名长度2~10位'
}
}
},
age: {
validators: {
notEmpty: {
message: '年龄不能为空'
},
greaterThan: {
// 大于指定的值
value: 18,
message: '年龄不能小于18岁'
},
lessThan: {
// 小于指定的值
value: 60,
message: '年龄不能超过60岁'
}
}
},
sex: {
validators: {
choice: {
min: 1,
max: 1,
message: '请选择性别'
}
}
},
group: {
validators: {
notEmpty: {
message: '组号不能为空'
},
regexp: {
regexp: /^\d{1,2}$/,
message: '请选择有效的组号'
}
}
},
phone: {
validators: {
notEmpty: {
message: '手机号不能为空'
},
regexp: {
regexp: /^1\d{10}$/,
message: '请填写有效的手机号'
}
}
},
salary: {
validators: {
notEmpty: {
message: '实际薪资不能为空'
},
greaterThan: {
value: 800,
message: '期望薪资不能低于800'
},
lessThan: {
value: 100000,
message: '期望薪资不能高于100000'
}
}
},
truesalary: {
validators: {
notEmpty: {
message: '实际薪资不能为空'
},
greaterThan: {
value: 800,
message: '实际薪资不能低于800'
},
lessThan: {
value: 100000,
message: '实际薪资不能高于100000'
}
}
},
province: {
validators: {
notEmpty: {
message: '省份必填'
}
}
},
city: {
validators: {
notEmpty: {
message: '市必填'
}
}
},
county: {
validators: {
notEmpty: {
message: '县必填'
}
}
}
}
}
}
// 默认加载所有省的数据
axios.get('/geo/province').then(res => {
addCitySelect.innerHTML = `<option selected value="">--市--</option>`
addCountySelect.innerHTML = '<option selected value="">--县--</option>'
let str = `<option selected value="">--省--</option>`
res.data.map((value) => {
str += `<option value="${value}">--${value}--</option>`
})
addProvinceSelect.innerHTML = str
})
// 实现省市区级联
// 选择省，加载这个省的市
// 监听用户是否选择的一个省：change
addProvinceSelect.addEventListener('change', function () {
let pname = this.value
// 如果用户没有选择具体的省则不去发起axios请求，同时重置市的选项值
addCitySelect.innerHTML = `<option selected value="">--市--</option>`
addCountySelect.innerHTML = '<option selected value="">--县--</option>'
if (pname == '') {
return
}
// 根据用户所选择省加载它对应的所有市
axios({
url: '/geo/city',
params: { pname }
}).then(res => {
let str = '<option selected value="">--市--</option>'
res.data.map((value) => {
str += `<option value="${value}">--${value}--</option>`
})
addCitySelect.innerHTML = str
})
})
// 选择市，加载这个市的区县
addCitySelect.addEventListener('change', function () {
let pname = addProvinceSelect.value
let cname = addCitySelect.value
addCountySelect.innerHTML = '<option selected value="">--县--</option>'
if (cname == '') {
return
}
axios({
url: '/geo/county',
params: { pname, cname }
}).then(res => {
let str = '<option selected value="">--县--</option>'
res.data.map((value) => {
str += `<option selected value="${value}">--${value}--</option>`
})
addCountySelect.innerHTML = str
})
})
