layui（表单提交）

复制代码
<!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>
复制代码

 

posted @   想学前端的小李  阅读(585)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~
点击右上角即可分享
微信分享提示
SQL AI 助手