@{
Layout = null;
}
<!DOCTYPE
html>
<
html>
<head>
<meta name="viewport" content="width=device-width" />
<title>资料修改</title>
<link href="~/Scripts/layui/css/layui.css" rel="
stylesheet" />
<script src="~/Scripts/layui/layui.js"></script>
<script src="~/Scripts/jquery-3.4.1.js"></script>
<
style>
body {
display
: flex;
justify-content
: center;
align-items
: center;
min-height
: 100vh;
background-color
: #f8f8f8;
}
.form-container {
width
: 100%;
max-width
: 768px;
padding
: 24px;
background
: #fff;
box-shadow
: 0 2px 8px rgba(0,0,0,0.1);
border-radius
: 8px;
}
.layui-form-item .layui-form-label {
width
: 120px;
}
.layui-form-item .layui-input-block {
margin-left
: 120px;
}
@*@media (max-width
: 768px) {
.layui-form-item .layui-form-label {
width
: 90px;
}*@
.layui-form-item .layui-input-block {
margin-left
: 90px;
}
</
style>
</head>
<body>
<div class="form-container">
<form class="layui-form">
<!-- 基础信息 -->
<fieldset class="layui-elem-field layui-field-title">
<legend>基础信息</legend>
</fieldset>
<div class="layui-form-item">
<label class="layui-form-label">用户账号</label>
<div class="layui-input-block">
<input type="text" name="UserCode" lay-verify="required|username" placeholder="请输入用户账号" autocomplete="off" class="layui-input" disabled>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="UserName" lay-verify="required|nickname" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" name="Sex" value="true" title="男" checked>
<input type="radio" name="Sex" value="false" title="女">
</div>
</div>
<!-- 联系信息 -->
<fieldset class="layui-elem-field layui-field-title">
<legend>联系信息</legend>
</fieldset>
<div class="layui-form-item">
<label class="layui-form-label">电话</label>
<div class="layui-input-block">
<input type="tel" name="Tel" lay-verify="required|phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="text" name="Email" lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
</div>
</div>
<!-- 安全设置 -->
<fieldset class="layui-elem-field layui-field-title">
<legend>安全设置</legend>
</fieldset>
<div class="layui-form-item">
<label class="layui-form-label">原密码</label>
<div class="layui-input-inline layui-input-wrap">
<input type="password" name="OldPassword" lay-verify="pass" placeholder="请输入原密码" autocomplete="off" lay-affix="eye" class="layui-input">
</div>
<div class="layui-form-mid layui-text-em">6-12位字符</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">新密码</label>
<div class="layui-input-inline layui-input-wrap">
<input type="password" name="NewPassword" lay-verify="pass" placeholder="请输入新密码" autocomplete="off" lay-affix="eye" class="layui-input">
</div>
<div class="layui-form-mid layui-text-em">6-12位字符</div>
</div>
<!-- 其他信息 -->
<fieldset class="layui-elem-field layui-field-title">
<legend>其他信息</legend>
</fieldset>
<div class="layui-form-item">
<label class="layui-form-label">出生日期</label>
<div class="layui-input-inline layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-date"></i>
</div>
<input type="text" name="BirthDay" id="birthDate" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">籍贯</label>
<div class="layui-input-block">
<input type="text" name="NativePlace" placeholder="请输入籍贯" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">地址</label>
<div class="layui-input-block">
<input type="text" name="Address" placeholder="请输入详细地址" autocomplete="off" class="layui-input">
</div>
</div>
<!-- 权限信息 -->
<fieldset class="layui-elem-field layui-field-title">
<legend>权限信息</legend>
</fieldset>
<div class="layui-form-item">
<label class="layui-form-label">职位</label>
<div class="layui-input-block">
<select name="PositionID" lay-verify="required" lay-search>
<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">组织机构</label>
<div class="layui-input-block">
<select name="OrganizationID" lay-verify="required" lay-search>
<option value="">请选择组织机构</option>
<option value="1">总部</option>
<option value="2">技术部</option>
<option value="3">市场部</option>
</select>
</div>
</div>
<!-- 操作按钮 -->
<div class="layui-form-item">
<div class="layui-input-block">
<
button type="
submit" class="layui-btn" lay-
submit lay-filter="form
Submit">立即提交</
button>
<
button type="
button" class="layui-btn layui-btn-primary" onclick="window.history.back()">返回登录</
button>
<
button type="
reset" class="layui-btn layui-btn-primary">重置</
button>
</div>
</div>
</form>
</div>
<script>
// 初始化日期选择器
layui.use('laydate', function () {
var laydate = layui.laydate;
laydate.render({
elem
: '#birthDate'
});
});
// 表单验证规则扩展
layui.use('form', function () {
var form = layui.form;
form.verify({
username
: function (value) {
if (!/^[a-zA-Z0-9_]{4,16}$/.test(value)) {
return '用户名为4-16位字母、数字或下划线';
}
},
nickname
: function (value) {
if (value.length < 2 || value.length > 20) {
return '昵称长度应在2-20个字符之间';
}
}
});
});
</script>
</body>
</
html>
使修改密码放在和个人资料同一列表下并从中移出来
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
