<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../head.jsp" %>
<html>
<head>
<meta charset="utf-8">
<title>添加实验室成员信息</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
sub {
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<form class="layui-form layui-form-pane" action="BaseServlet.do?servlet=MemberServlet&method=add" method="post">
<div class="layui-form-item">
<label class="layui-form-label"><sub>*</sub>姓名</label>
<div class="layui-input-block">
<input type="text" name="realName" lay-verify="realName" autocomplete="off" placeholder="请输入姓名"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><sub>*</sub>学号</label>
<div class="layui-input-block">
<input type="text" name="studentId" lay-verify="studentId" autocomplete="off" placeholder="请输入学号"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><sub>*</sub>性别</label>
<div class="layui-input-block">
<input type="radio" name="gender" value="0" title="男" checked="checked">
<input type="radio" name="gender" value="1" title="女">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><sub>*</sub>年级</label>
<div class="layui-input-block">
<input type="text" class="layui-input" id="grade" name="grade" readonly="readonly" lay-verify="required"
lay-reqtext="请选择年级" placeholder="请选择" value="">
</div>
</div>
<%--存放籍贯--%>
<input type="hidden" name="nativePlace" id="nativePlace">
<div class="layui-form-item" id="nation">
<label class="layui-form-label "><sub>*</sub>籍贯</label>
<div class="layui-input-inline">
<select name="province" class="province-selector" lay-filter="province-1" lay-verify="required"
lay-reqtext="籍贯不能为空">
<option value="">请选择省</option>
</select>
</div>
<div class="layui-input-inline">
<select name="city" class="city-selector" lay-filter="city-1" lay-verify="required" lay-reqtext="请选择市">
<option value="">请选择市</option>
</select>
</div>
<div class="layui-input-inline">
<select name="county" class="county-selector" lay-filter="county-1" lay-verify="required"
lay-reqtext="请选择县区">
<option value="">请选择区</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><sub>*</sub>手机号</label>
<div class="layui-input-block">
<input type="number" name="phone" lay-verify="phone" autocomplete="off" placeholder="请输入手机号"
class="layui-input" oninput="if(value.length>11)value=value.slice(0,11)">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><sub>*</sub>院系</label>
<div class="layui-input-block">
<select name="college" lay-filter="college" lay-verify="required" lay-reqtext="院系不能为空，请选择">
<option value="">请选择</option>
<c:forEach items="${collegeList}" var="college">
<option value="${college.collegeId}">${college.collegeName} </option>
</c:forEach>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><sub>*</sub>专业</label>
<div class="layui-input-block">
<select name="major" lay-verify="required" lay-reqtext="专业不能为空，请选择">
<option value="">-请选择-</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">校内职务</label>
<div class="layui-input-block">
<select name="duty" lay-verify="required" lay-reqtext="职务不能为空，请选择">
<option value="0">班干部</option>
<option value="1">学生会干部</option>
<option value="2">社团干部</option>
<option value="3">无</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label "><sub>*</sub>加入日期</label>
<div class="layui-input-block">
<input id="joinDate" type="text" name="joinDate" placeholder="请选择加入日期" value="" class="layui-input"
lay-verify="required" lay-reqtext="加入日期不能为空" readonly>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><sub>*</sub>状态</label>
<div class="layui-input-block">
<select name="state" lay-verify="required" lay-reqtext="状态不能为空，请选择">
<option value="">-请选择-</option>
<option value="1">正常</option>
<option value="2">退出</option>
<option value="3">毕业</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><sub>*</sub>实验室职务</label>
<div class="layui-input-block">
<select name="job" lay-verify="required" lay-reqtext="职务不能为空，请选择">
<option value="">-请选择-</option>
<option value="1">秘书长</option>
<option value="2">副秘书长</option>
<option value="3">技术总监</option>
<option value="4">项目经理</option>
<option value="5">组长</option>
</select>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<textarea name="remark" class="layui-textarea" placeholder="请输入备注信息"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button tpe="submit" class="layui-btn" lay-submit="" lay-filter="btnSubmit">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<script>
layui.use(['form'], function () {
var form = layui.form,
layer = layui.layer,
$ = layui.$;
var phoneFlag = 0;
var studentId = 0;
form.verify({
realName: function (value) {
return realNameVerify(value);// 表单提交和文本框失去焦点共用一个方法进行校验
}
, studentId: function (value) {
return studentIdVerify(value);
}
, remark: function (value) {
return remarkVerify(value);
}
, schoolJob: function (value, item) {
return schoolJobVerify(value);
}
});
// 备注失去焦点校验
$("textarea[name='remark']").on('blur', function () {
var result = remarkVerify(this.value);// 表单提交和文本框失去焦点共用一个方法进行校验
if (result) {
layer.msg(result, {icon: 0})
}
})
function remarkVerify(value) {
if (value == '') {
return '';
} else {
var reg = /^[\u4E00-\u9FA5]{2,30}$/;
if (!reg.test(value)) {
return '备注只能是2-30个汉字';
}
}
}
//姓名
function realNameVerify(value) {
var reg = /^[\u4E00-\u9FA5]{2,5}$/;
if (!reg.test(value)) {
return '请输入2-5个汉字';
}
}
$("input[name='realName']").on('blur', function () {
var result = realNameVerify(this.value);// 表单提交和文本框失去焦点共用一个方法进行校验
// 如果有返回值
if (result) {
layer.msg(result, {icon: 0})
}
})
//学号
function studentIdVerify(value) {
var reg = /^\d+$|^\d+[.]?\d+$/;
if (!reg.test(value)) {
return '请输入数字';
}
}
$("input[name='studentId']").on('blur', function () {
var result = studentIdVerify(this.value);// 表单提交和文本框失去焦点共用一个方法进行校验
if (result) {
layer.msg(result, {icon: 0})
} else {
var url = "BaseServlet.do?" +
"servlet=MemberServlet" +
"&method=checkName&studentId=" + this.value;
$.get(url, function (data) {
// data是后台返回的数据
if (data == "true") {
if (phoneFlag == 1) {
phoneFlag = 0;
if (studentId == 0) {
$("button").removeClass("layui-btn-disabled").attr("disabled", false);
}
}
} else {
layer.msg("学号已存在，请检查！", {icon: 0})
phoneFlag = 1;
$("button").addClass("layui-btn-disabled").attr("disabled", true);
}
})
}
})
// 手机号
$("input[name='phone']").on('blur', function () {
var result = phoneVerify(this.value);// 表单提交和文本框失去焦点共用一个方法进行校验
if (result) {
layer.msg(result, {icon: 0})
} else {
var url = "BaseServlet.do?" +
"servlet=MemberServlet" +
"&method=checkName&phone=" + this.value;
$.get(url, function (data) {
// data是后台返回的数据
if (data == "true") {
if(phoneFlag==1){
phoneFlag=0;
if(phoneFlag==0){
$("button").removeClass("layui-btn-disabled").attr("disabled", false);
}
}
} else {
phoneFlag=1;
layer.msg("电话已存在，请检查！", {icon: 0})
$("button").addClass("layui-btn-disabled").attr("disabled", true);
}
})
}
})
function phoneVerify(value, item) {
var reg = /^1[3456789]\d{9}$/;
if ((!reg.test(value))) {
return "请输入正确的手机号码！";
}
}
function schoolJobVerify(value, item) {
if (value == '') {
return '';
} else {
var reg = /^[\u4E00-\u9FA5]{2,9}$/;
if (!reg.test(value)) {
return '职位只能是2-9个汉字';
}
}
}
// 职位失去焦点校验
$("input[name='schoolJob']").on('blur', function () {
var result = schoolJobVerify(this.value);// 表单提交和文本框失去焦点共用一个方法进行校验
if (result) {
layer.msg(result, {icon: 0})
}
})
});
// 年月日选择器（加入时间）
layui.use('laydate', function () {
var laydate = layui.laydate;
laydate.render({
elem: '#joinDate',
trigger: 'click'
});
})
// 三级联动的JS代码
//配置插件目录
/* layui.config({
base: 'js/lay-module/layarea/'
, version: '1.0'
});*/
//一般直接写在一个js文件中
layui.use(['layer', 'form', 'layarea', 'laydate'], function () {
var layer = layui.layer
, form = layui.form
, layarea = layui.layarea
, $ = layui.$;
laydate = layui.laydate;
// 时间组件
laydate.render({
elem: '#grade'
, trigger: 'click'
, type: 'year'
});
// 专业院系联动
form.on('select(college)', function (data) {
var college = $("select[name='college']").val();
var url = "BaseServlet.do?servlet=MajorServlet&method=searchListAll&college=" + college;
$.get(url, function (resp) {
if(resp==""){
$("select[name='major']").empty();
$("select[name='major']").append("<option value=''>无</option>")
form.render("select");
}else{
var arr = resp.split(",");
$("select[name='major']").empty();
$("select[name='major']").append("<option value=''>-请选择-</option>")
for (let i = 0; i < arr.length; i++) {
let major = arr[i];
let arr2 = major.split("-");
$("select[name='major']").append("<option value='" + arr2[0] + "'>" + arr2[1] + "</option>")
}
form.render("select");
}
})
});
layarea.render({
elem: '#nation',
change: function (res) {
//选择结果
console.log(res);
}
});
// 页面提交跳转
form.on('submit(btnSubmit)', function (data) {
let province = $("select[name = 'province']").val();
let city = $("select[name = 'city']").val();
let county = $("select[name = 'county']").val();
$("input[name='nativePlace']").val(province + "-" + city + "-" + county)
var iframeIndex = parent.layer.getFrameIndex(window.name);
parent.layer.close(iframeIndex);
});
});
</script>
</body>
</html>
浙公网安备 33010602011771号