229 lines
8.7 KiB
HTML
229 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Quick Start - Layui</title>
|
||
<link href="layui/css/layui.css" rel="stylesheet">
|
||
<style>
|
||
.container {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 15vh;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h2>展板数据配置</h2>
|
||
</div>
|
||
<form class="layui-form" action="">
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">时间</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" class="layui-input" id="ID-laydate-type-time" placeholder="HH:mm:ss" lay-verify="required">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">字体大小</label>
|
||
<div class="layui-input-inline">
|
||
<input type="number" name="price_min" lay-verify="required" placeholder="字体大小" lay-verify="required" autocomplete="off" class="layui-input" min="15" max="60" step="1" lay-affix="number">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">负责人</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" class="layui-input" placeholder="负责人" lay-verify="required">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">字体大小</label>
|
||
<div class="layui-input-inline">
|
||
<input type="number" name="price_min" lay-verify="required" placeholder="字体大小" autocomplete="off" class="layui-input" min="15" max="60" step="1" lay-affix="number">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">风险等级</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" class="layui-input" placeholder="风险等级" lay-verify="required">
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">字体大小</label>
|
||
<div class="layui-input-inline">
|
||
<input type="number" name="price_min" placeholder="字体大小" autocomplete="off" class="layui-input" min="15" max="60" step="1" lay-affix="number">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">工作内容</label>
|
||
<div class="layui-input-inline">
|
||
<textarea name="message" class="layui-textarea"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">字体大小</label>
|
||
<div class="layui-input-inline">
|
||
<input type="number" name="price_min" placeholder="字体大小" autocomplete="off" class="layui-input" min="15" max="60" step="1" lay-affix="number">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">危险点</label>
|
||
<div class="layui-input-inline">
|
||
<textarea name="message" class="layui-textarea"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">字体大小</label>
|
||
<div class="layui-input-inline">
|
||
<input type="number" name="price_min" placeholder="字体大小" autocomplete="off" class="layui-input" min="15" max="60" step="1" lay-affix="number">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">重点管控措施</label>
|
||
<div class="layui-input-inline">
|
||
<textarea name="message" class="layui-textarea"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">字体大小</label>
|
||
<div class="layui-input-inline">
|
||
<input type="number" name="price_min" placeholder="字体大小" autocomplete="off" class="layui-input" min="15" max="60" step="1" lay-affix="number">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<div class="layui-upload">
|
||
<button type="button" class="layui-btn" id="ID-upload-demo-btn-2" style="margin-left:30px">
|
||
<i class="layui-icon layui-icon-upload"></i> 党员上传
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
|
||
预览图：
|
||
<div class="layui-upload-list" id="upload-demo-preview"></div>
|
||
</blockquote>
|
||
</div>
|
||
|
||
</form>
|
||
|
||
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
|
||
<script src="layui/layui.js"></script>
|
||
<script>
|
||
layui.use(['form', 'laydate', 'util'], function () {
|
||
var form = layui.form;
|
||
var layer = layui.layer;
|
||
var laydate = layui.laydate;
|
||
var upload = layui.upload;
|
||
var util = layui.util;
|
||
|
||
|
||
// 多图片上传
|
||
upload.render({
|
||
elem: '#ID-upload-demo-btn-2',
|
||
url: '', // 实际使用时改成您自己的上传接口即可。
|
||
multiple: true,
|
||
before: function (obj) {
|
||
// 预读本地文件示例，不支持ie8
|
||
obj.preview(function (index, file, result) {
|
||
$('#upload-demo-preview').append('<img src="' + result + '" alt="' + file.name + '" style="width: 90px; height: 90px;">')
|
||
});
|
||
},
|
||
done: function (res) {
|
||
// 上传完毕
|
||
// …
|
||
}
|
||
});
|
||
|
||
|
||
// 时间选择器
|
||
laydate.render({
|
||
elem: '#ID-laydate-type-time',
|
||
type: 'time'
|
||
});
|
||
// 自定义验证规则
|
||
form.verify({
|
||
pass: function (value) {
|
||
if (!/(.+){6,12}$/.test(value)) {
|
||
return '密码必须 6 到 12 位';
|
||
}
|
||
}
|
||
});
|
||
|
||
// 指定开关事件
|
||
form.on('switch(switchTest)', function (data) {
|
||
layer.msg('开关 checked：' + (this.checked ? 'true' : 'false'), {
|
||
offset: '6px'
|
||
});
|
||
layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是 ON|OFF', data.othis)
|
||
});
|
||
|
||
// 提交事件
|
||
form.on('submit(demo1)', function (data) {
|
||
var field = data.field; // 获取表单字段值
|
||
// 显示填写结果，仅作演示用
|
||
layer.alert(JSON.stringify(field), {
|
||
title: '当前填写的字段值'
|
||
});
|
||
// 此处可执行 Ajax 等操作
|
||
// …
|
||
return false; // 阻止默认 form 跳转
|
||
});
|
||
|
||
// 日期
|
||
laydate.render({
|
||
elem: '#date'
|
||
});
|
||
|
||
// 普通事件
|
||
util.on('lay-on', {
|
||
// 获取验证码
|
||
"get-vercode": function (othis) {
|
||
var isvalid = form.validate('.demo-phone'); // 主动触发验证，v2.7.0 新增
|
||
// 验证通过
|
||
if (isvalid) {
|
||
layer.msg('手机号规则验证通过');
|
||
// 此处可继续书写「发送验证码」等后续逻辑
|
||
// …
|
||
}
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html> |