src/main/resources/templates/system/operator/operator.html

<!-- operator表单弹窗 -->
<form id="oper-form" lay-filter="oper-form" class="layui-form model-form">
    <input name="operid" id="operid" type="hidden"/>
    <div class="layui-form-item">
        <label class="layui-form-label">账号</label>
        <div class="layui-input-block">
            <input name="opercode" placeholder="请输入账号" type="text" class="layui-input" maxlength="20"
                   lay-verify="required|opercode" required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input name="opername" placeholder="请输入用户名" type="text" class="layui-input" maxlength="60"
                   lay-verify="required" required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="male" title="男" checked/>
            <input type="radio" name="sex" value="female" title="女"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
            <input name="mobile" placeholder="请输入手机号" type="text" class="layui-input" lay-verify="mobile" />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
            <input name="email" placeholder="请输入邮箱" type="text" class="layui-input" lay-verify="swEmail" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">角色</label>
        <div class="layui-input-block">
            <select name="roleId" xm-select="roleId" lay-verify="required">
                <option th:each="role : ${roles}" th:value="${role.roleId}">[[${role.roleName}]]</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item model-form-footer">
        <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        <button class="layui-btn" lay-filter="oper-form-submit" lay-submit  id="submitbtn">保存</button>
    </div>
</form>


<script>
    layui.use(['layer', 'admin', 'form', 'formSelects'], function () {
        var layer = layui.layer;
        var admin = layui.admin;
        var form = layui.form;
        var formSelects = layui.formSelects;

        form.render('radio');
        form.verify({
            "mobile": function (e) {
                if (null != e && e.length > 0 && !(/^1\d{10}$/.test(e))) {
                    return "请输入正确的手机号";
                }
            },
            "swEmail": function (e) {
                if (null != e && e.length > 0 && !(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(e))) {
                    return "邮箱格式不正确";
                }
            },
            "opercode": function (e) {
                if(null!=e && e.length>0 && !(/^[0-9a-zA-Z]*$/.test(e))){
                    return "账号非法，请填入字母、数字或它们的组合";
                }

                var msg = "";
                $.ajax({
                    type: "GET",
                    url: '/operator/checkopercode',
                    async: false, //同步提交。不设置则默认异步，异步的话，最后执行ajax
                    data: {
                        opercode: e,
                        operid: $("#operid").val()
                    },
                    success: function (result) {
                        if (result.code != 200) {
                            msg = result.msg;
                        }
                    },
                    error: function (error) {
                        msg = "请求服务器校验账号失败";
                    }
                });
                if (msg != "") {
                    return msg;
                }
            }
        });

        var url = '/operator/add';
        // 回显user数据
        var user = admin.getTempData('t_user');
        if (user) {
            $('input[name="opercode"]').attr('readonly', 'readonly');
            form.val('oper-form', user);
            var rds = new Array();
            for (var i = 0; i < user.roles.length; i++) {
                rds.push(user.roles[i].roleId);
            }
            formSelects.value('roleId', rds);
        }
        // 表单提交事件
        form.on('submit(oper-form-submit)', function (data) {
            layer.load(2);
            var token_name = $("meta[name='_csrf_token']").attr("content");
            var token = $("meta[name='_csrf_token']").attr("value");
            data.field[token_name] = token;
            $.ajax({
                type : "POST",
                dataType : "json",
                url : url,
                data : data.field,
                success : function(result) {
                    layer.closeAll('loading');
                    if (result.code == 200) {
                        layer.msg(result.msg, {icon: 1});
                        admin.finishPopupCenter();
                    } else if (data.code == 401) {
                        layer.msg(result.msg, {icon: 2, time: 1500}, function () {
                            location.replace('/login');
                        }, 1000);
                        return;
                    } else {
                        console.log('err:' + result.code);
                        layer.msg(result.msg, {icon: 2});
                    }
                },
                error : function(data) {
                    layer.closeAll('loading');
                    layer.msg("请求服务器失败！", {icon: 2});
                }
            });
            return false;
        });
    });
</script>