blog_tp6/view/sys/sys_user/save.html

<article class="cl pd-20">
    <form action="" method="post" class="form form-horizontal" id="form-save">
        <input type="hidden" name="userid" id="userid" value="{$data.userid}">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">
                <span class="c-red">*</span>用户名：</label>
            <div class="formControls col-xs-8 col-sm-6">
                <input type="text" class="input-text" id="username" name="username" value="{$data.username}"
                    autocomplete="new-password">
            </div>
        </div>
        {empty name="$data.id"}
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">
                <span class="c-red">*</span>初始密码：</label>
            <div class="formControls col-xs-4 col-sm-6">
                <input type="password" class="input-text" id="password" name="password" value=""
                    placeholder="初始密码, 6位及以上, 至少包括字母和数字" autocomplete="new-password">
            </div>
            <div class=" form-label col-xs-4 col-sm-4" style="text-align: left;">
                <span class="c-red" id="span_password">* 为空时使用系统配置的默认密码</span>
            </div>
        </div>
        {else/}
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">
                修改密码：</label>
            <div class="formControls col-xs-8 col-sm-6">
                <input type="password" class="input-text" id="password" name="password" value=""
                    placeholder="6位及以上, 至少包括字母和数字" autocomplete="new-password">
            </div>
        </div>
        {/empty}
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">
                确认密码：</label>
            <div class="formControls col-xs-8 col-sm-6">
                <input type="password" class="input-text" id="repassword" name="repassword" value=""
                    placeholder="确认密码, 两次密码需一致">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">
                昵称: </label>
            <div class="formControls col-xs-8 col-sm-6">
                <input type="text" class="input-text" id="nickname" name="nickname" value="{$data.nickname}"
                    placeholder="昵称">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">
                姓名: </label>
            <div class="formControls col-xs-8 col-sm-6">
                <input type="text" class="input-text" id="truename" name="truename" value="{$data.truename}"
                    placeholder="姓名">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">邮箱：</label>
            <div class="formControls col-xs-4 col-sm-6">
                <input type="text" class="input-text" id="email" name="email" value="{$data.email}"
                    autocomplete='email'>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">
                <span class="c-red">*</span>角色：</label>
            <div class="formControls col-xs-4 col-sm-4">
                <span class="select-box" style="width:150px;">
                    <select class="select" id="roleid" name="roleid">
                        {foreach $dataRole as $k=>$op}
                        <option value="{$k}" {eq name="data.roleid" value="$k" }selected{/eq}>{$op}</option>
                        {/foreach}
                    </select>
                </span>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">
                头像：</label>
                <div class="formControls col-xs-6 col-sm-4">
                    <input type="text" class="input-text" value="{$data.avatar}" name="avatar" id="picture">
                    <div style="width: 160px;height: 160px;">
                     <a href="javascript:void(0);" onclick="uploadPicture()" >
                        <img id="view-img" src="{$data.avatar ? $data.avatar : '/static/images/upload_picture.png'}" alt="头像" title="{$data.title_pic ? '更换' : '添加'}头像" style="max-width: 160px;max-height: 160px;">
                     </a>
                    </div>
                </div>
                <label class="form-label col-xs-2 col-sm-2">
                    <a class="btn btn-success radius" href="javascript:uploadPicture();">{$data.avatar ? '更换' : '添加'}头像</a></label>
            <div class="col-3"> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">
                <span class="c-red"></span>状态：</label>
            <div class="formControls col-xs-8 col-sm-6">
                <div class="radio-box">
                    <input type="radio" name="status" id="status-1" value="1" {$data.status ==null || $data.status==1 ? 'checked' : ""}>
                    <label for="typeId-1">启用</label>
                </div>
                <div class="radio-box">
                    <input type="radio" name="status" id="status-2" value="2" {$data.status==2 ? 'checked' : ""}>
                    <label for="status-2">禁用</label>
                </div>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">备注：</label>
            <div class="formControls col-xs-8 col-sm-6">
                <textarea id="remark" name="remark" cols="" rows="" class="textarea" placeholder="备注...200个字符以内"
                    dragonfly="true" onKeyUp="textarealength(this,200)">{$data.remark}</textarea>
                <p class="textarea-numberbar">
                    <em class="textarea-length">0</em>/200
                </p>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-success radius" type="button" id="form-save-button"
                    value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                <input class="btn btn-default radius" type="button" value="&nbsp;&nbsp;取消&nbsp;&nbsp;"
                    onClick="layer_close();">
            </div>
        </div>
    </form>
</article>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
    // 图片上传
    function uploadPicture() {
        layer.open({
            type: 2,
            area: ['700px', '500px'],
            fix: false, //不固定
            maxmin: true,
            shade: 0.4,
            title: '添加缩略图',
            content: '{:url("file_manager/uploadimg", ["_layer"=>true])}'
        });
    }
    $(function () {
        // 密码正则验证复杂度
        function checkPassword(password) {
            var res = pwdFormat6Mix(password);
            if (!res) {
                layer.msg('* 密码6位及以上, 至少包括字母和数字', {
                    icon: 5,
                    time: 1000
                });
                return false;
            } else {
                return true;
            }
        }

        // 确认密码
        function confirmPassword(password, repassword) {
            if (password != repassword) {
                layer.msg('两次密码不一致', {
                    icon: 5,
                    time: 1000
                });
                return false;
            } else {
                return true;
            }
        }

        $("#password").blur(function () {
            if (!isNull($("#password").val())) {
                return checkPassword($("#password").val());
            }
        })

        $("#repassword").blur(function () {
            return confirmPassword($("#password").val(), $("#repassword").val());
        })

        $("#form-save-button").click(function () {
            if (!$("#username").val() || !$("#roleid").val) {
                layer.msg('用户名 or 角色 不能为空!', {
                    icon: 5,
                    time: 1000
                });
                return false;
            }
            
            var password = $("#password").val();
            var repassword = $("#repassword").val();
            if (!isNull(password) && !checkPassword(password)) {
                return false;
            }
            if (!confirmPassword(password, repassword)) {
                return false;
            }

            var email = $("#email").val();
            if (!isNull(email) && testEmail(email) == false) {
                layer.msg('邮箱格式不正确', {
                    icon: 5,
                    time: 1000
                });
                return false;
            }

            if (getblen($("#remark").val()) > 200) {
                layer.msg('备注过长', {
                    icon: 5,
                    time: 1000
                });
                return false;
            }

            var data = $("#form-save").serializeArray();
            $.ajax({
                type: 'POST',
                url: '{:url("save")}',
                data: data,
                dataType: 'json',
                success: function (res) {
                    // console.log(res);
                    if (res.code == 0) {
                        layer.msg(res.msg, { icon: 1 }, function () {
                            parent.location.reload(); // 父页面刷新
                            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                            parent.layer.close(index);
                        });
                    } else {
                        layer.msg(data.msg, {
                            icon: 5,
                            time: 1000
                        });
                        return false;
                    }
                }
            })
        })
    })
</script>
<!--请在上方写此页面业务相关的脚本-->