@{
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="Old
Password" 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="New
Password" 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="formSubmit">立即
提交</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>
使修改密码放在和个人资料同一列表下并从中移出来
本文介绍了HTML表单中的基本元素，包括文本输入框、密码框和单选按钮等，并解释了这些元素如何帮助用户输入信息并提交给网站。
扫一扫
1183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
