jsasg/orico-official-website-old
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
jsasg
2024-10-29 14:04:59 +08:00
commit 48bf3e6f33
2839 changed files with 762707 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
public/frontend/layui-main/docs/form/examples/form.demo.md Executable file
View File

@@ -0,0 +1,258 @@
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">验证必填项</label>
<div class="layui-input-block">
<input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">验证手机号</label>
<div class="layui-input-inline layui-input-wrap">
<input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" lay-reqtext="请填写手机号" lay-affix="clear" class="layui-input demo-phone">
</div>
<div class="layui-form-mid" style="padding: 0!important;">
<button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode">获取验证码</button>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">验证码</label>
<div class="layui-input-inline layui-input-wrap">
<input type="text" name="vercode" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
</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" name="email" lay-verify="email" placeholder="有值时才校验" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<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="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
</div>
</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="password" lay-verify="required|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">
<div class="layui-inline">
<label class="layui-form-label">数字输入框</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="number" name="price_min" placeholder="" autocomplete="off" class="layui-input" min="0" step="1" lay-affix="number">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline" style="width: 100px;">
<input type="number" name="price_max" placeholder="" autocomplete="off" class="layui-input" min="0" step="1" lay-affix="number">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单行选择框</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1" selected>阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">分组选择框</label>
<div class="layui-input-inline">
<select name="quiz">
<option value="">请选择问题</option>
<optgroup label="城市记忆">
<option value="你工作的第一个城市">你工作的第一个城市</option>
</optgroup>
<optgroup label="学生时代">
<option value="你的工号">你的工号</option>
<option value="你最喜欢的老师">你最喜欢的老师</option>
</optgroup>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">搜索选择框</label>
<div class="layui-input-inline">
<select name="modules" lay-verify="required" lay-search>
<option value="">直接选择或搜索选择</option>
<option value="1">layer</option>
<option value="2">form</option>
<option value="3">layim</option>
<option value="4">element</option>
<option value="5">laytpl</option>
<option value="6">upload</option>
<option value="7">laydate</option>
<option value="8">laypage</option>
<option value="9">flow</option>
<option value="10">util</option>
<option value="11">code</option>
<option value="12">tree</option>
<option value="13">layedit</option>
<option value="14">nav</option>
<option value="15">tab</option>
<option value="16">table</option>
<option value="17">select</option>
<option value="18">checkbox</option>
<option value="19">switch</option>
<option value="20">radio</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">联动选择框</label>
<div class="layui-input-inline">
<select name="quiz1">
<option value="">请选择省</option>
<option value="浙江" selected>浙江省</option>
<option value="你的工号">江西省</option>
<option value="你最喜欢的老师">福建省</option>
</select>
</div>
<div class="layui-input-inline">
<select name="quiz2">
<option value="">请选择市</option>
<option value="杭州">杭州</option>
<option value="宁波" disabled>宁波</option>
<option value="温州">温州</option>
<option value="温州">台州</option>
<option value="温州">绍兴</option>
</select>
</div>
<div class="layui-input-inline">
<select name="quiz3">
<option value="">请选择县/区</option>
<option value="西湖区">西湖区</option>
<option value="余杭区">余杭区</option>
<option value="拱墅区">临安市</option>
</select>
</div>
<div class="layui-form-mid layui-text-em">
<i class="layui-icon layui-icon-tips" lay-tips="{
content: '此处只是演示联动排版，并未做联动交互',
margin: '0 0 0 -10px'
}"></i>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="arr[0]" title="选项1">
<input type="checkbox" name="arr[1]" title="选项2" checked>
<input type="checkbox" name="arr[2]" title="选项3">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">标签框</label>
<div class="layui-input-block">
<input type="checkbox" name="arr1[0]" lay-skin="tag" title="选项1" checked>
<input type="checkbox" name="arr1[1]" lay-skin="tag" title="选项2">
<input type="checkbox" name="arr1[2]" lay-skin="tag" title="选项3">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<input type="checkbox" name="open" lay-skin="switch" lay-filter="switchTest" title="ON|OFF">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男" checked>
<input type="radio" name="sex" value="女" title="女">
<input type="radio" name="sex" value="禁" title="禁用" disabled>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">普通文本域</label>
<div class="layui-input-block">
&lt;textarea placeholder="请输入内容" class="layui-textarea"&gt;&lt;/textarea&gt;
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<!-- import layui -->
<script>
layui.use(['form', 'laydate', 'util'], function(){
var form = layui.form;
var layer = layui.layer;
var laydate = layui.laydate;
var util = layui.util;
// 自定义验证规则
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>

109
public/frontend/layui-main/docs/form/examples/form.grid.md Executable file
View File

@@ -0,0 +1,109 @@
<form class="layui-form layui-row layui-col-space16">
<div class="layui-col-sm3">
<input type="text" name="A" placeholder="Field A" class="layui-input">
</div>
<div class="layui-col-sm3">
<div class="layui-input-wrap">
<input type="text" name="B" placeholder="Field B" lay-affix="clear" class="layui-input">
</div>
</div>
<div class="layui-col-sm3">
<input type="text" name="C" placeholder="Field C" class="layui-input">
</div>
<div class="layui-col-sm3">
<input type="text" name="D" placeholder="Field D" class="layui-input">
</div>
<div class="layui-col-md6">
<div class="layui-form-item" style="margin-bottom: 0;">
<label class="layui-form-label">Field E :</label>
<div class="layui-input-block">
<input type="text" name="E" placeholder="请输入" class="layui-input">
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-form-item" style="margin-bottom: 0;">
<label class="layui-form-label">Field F :</label>
<div class="layui-input-block">
<select name="quiz1">
<option value="">省份</option>
<option value="浙江">浙江省</option>
<option value="江西">江西省</option>
<option value="福建">福建省</option>
</select>
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
</div>
<input type="text" name="G" value="" required placeholder="Field G" class="layui-input" lay-affix="clear">
</div>
</div>
<div class="layui-col-md4">
<div class="layui-input-wrap">
<input type="text" name="H" required placeholder="Field H" id="demo-search-more" class="layui-input">
<div class="layui-input-suffix">
<i class="layui-icon layui-icon-more-vertical"></i>
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-date"></i>
</div>
<input type="text" name="I" required placeholder="Field I" class="layui-input demo-search-date">
<div class="layui-input-suffix">
<i class="layui-icon layui-icon-down"></i>
</div>
</div>
</div>
<div class="layui-btn-container layui-col-xs12">
<button class="layui-btn" lay-submit lay-filter="demo-search">Search</button>
<button type="reset" class="layui-btn layui-btn-primary">Reset</button>
</div>
</form>
<!-- import layui -->
<script>
layui.use(function(){
var form = layui.form;
var layer = layui.layer;
var laydate = layui.laydate;
var dropdown = layui.dropdown;
// 提交
form.on('submit(demo-search)', function(data){
layer.alert(JSON.stringify(data.field), {
title: '当前填写的字段值'
});
// 此处可执行 Ajax 等操作
// …
return false; // 阻止默认 form 跳转
});
// 下拉菜单
dropdown.render({
elem: '#demo-search-more',
data: [{
title: 'List A'
},{
title: 'List B'
},{
title: 'List C'
}],
click: function(obj, othis){
this.elem.val(obj.title);
},
style: 'width: 245px;'
})
// 日期
laydate.render({
elem: '.demo-search-date'
});
});
</script>

80
public/frontend/layui-main/docs/form/examples/form.login.md Executable file
View File

@@ -0,0 +1,80 @@
<style>
.demo-login-container{width: 320px; margin: 21px auto 0;}
.demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
</style>
<form class="layui-form">
<div class="demo-login-container">
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
</div>
<input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-password"></i>
</div>
<input type="password" name="password" value="" lay-verify="required" placeholder="密 码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
</div>
</div>
<div class="layui-form-item">
<div class="layui-row">
<div class="layui-col-xs7">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-vercode"></i>
</div>
<input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
</div>
</div>
<div class="layui-col-xs5">
<div style="margin-left: 10px;">
<img src="https://www.oschina.net/action/user/captcha" onclick="this.src='https://www.oschina.net/action/user/captcha?t='+ new Date().getTime();">
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
<a href="#forget" style="float: right; margin-top: 7px;">忘记密码？</a>
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
</div>
<div class="layui-form-item demo-login-other">
<label>社交账号登录</label>
<span style="padding: 0 21px 0 6px;">
<a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
<a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
<a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
</span>
或 <a href="#reg">注册帐号</a>
</div>
</div>
</form>
<!-- import layui -->
<script>
layui.use(function(){
var form = layui.form;
var layer = layui.layer;
// 提交事件
form.on('submit(demo-login)', function(data){
var field = data.field; // 获取表单字段值
// 显示填写结果，仅作演示用
layer.alert(JSON.stringify(field), {
title: '当前填写的字段值'
});
// 此处可执行 Ajax 等操作
// …
return false; // 阻止默认 form 跳转
});
});
</script>

102
public/frontend/layui-main/docs/form/examples/form.pane.md Executable file
View File

@@ -0,0 +1,102 @@
<!-- 给容器追加 class="layui-form-pane"，即可显示为方框风格 -->
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<label class="layui-form-label">长输入框</label>
<div class="layui-input-block">
<input type="text" name="title" autocomplete="off" placeholder="请输入" lay-verify="required" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">日期选择</label>
<div class="layui-input-block">
<input type="text" name="date" id="date1" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">行内表单</label>
<div class="layui-input-inline">
<input type="text" name="number" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码框</label>
<div class="layui-input-inline">
<input type="password" name="password" placeholder="请输入" lay-verify="required" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-text-em">请务必填写用户名</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">范围</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-inline">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1" selected>阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
<div class="layui-form-item" pane>
<label class="layui-form-label">开关-默认开</label>
<div class="layui-input-block">
<input type="checkbox" checked name="open" lay-skin="switch" lay-filter="switchTest" title="开关">
</div>
</div>
<div class="layui-form-item" pane>
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男" checked>
<input type="radio" name="sex" value="女" title="女">
<input type="radio" name="sex" value="禁" title="禁用" disabled>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">文本域</label>
<div class="layui-input-block">
&lt;textarea placeholder="请输入内容" class="layui-textarea"&gt;&lt;/textarea&gt;
</div>
</div>
<div class="layui-form-item">
<button class="layui-btn" lay-submit lay-filter="demo2">确认</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</form>
<!-- import layui -->
<script>
layui.use(['form'], function(){
var form = layui.form;
var layer = layui.layer;
// 提交事件
form.on('submit(demo2)', function(data){
var field = data.field; // 获取表单字段值
// 显示填写结果，仅作演示用
layer.alert(JSON.stringify(field), {
title: '当前填写的字段值'
});
// 此处可执行 Ajax 等操作
// …
return false; // 阻止默认 form 跳转
});
});
</script>

131
public/frontend/layui-main/docs/form/examples/form.reg.md Executable file
View File

@@ -0,0 +1,131 @@
<style>
.demo-reg-container{width: 320px; margin: 21px auto 0;}
.demo-reg-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
</style>
<form class="layui-form">
<div class="demo-reg-container">
<div class="layui-form-item">
<div class="layui-row">
<div class="layui-col-xs7">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-cellphone"></i>
</div>
<input type="text" name="cellphone" value="" lay-verify="required|phone" placeholder="手机号" lay-reqtext="请填写手机号" autocomplete="off" class="layui-input" id="reg-cellphone">
</div>
</div>
<div class="layui-col-xs5">
<div style="margin-left: 11px;">
<button type="button" class="layui-btn layui-btn-fluid layui-btn-primary" lay-on="reg-get-vercode">获取验证码</button>
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-vercode"></i>
</div>
<input type="text" name="vercode" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-password"></i>
</div>
<input type="password" name="password" value="" lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input" id="reg-password" lay-affix="eye">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-password"></i>
</div>
<input type="password" name="confirmPassword" value="" lay-verify="required|confirmPassword" placeholder="确认密码" autocomplete="off" class="layui-input" lay-affix="eye">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
</div>
<input type="text" name="nickname" value="" lay-verify="required" placeholder="昵称" autocomplete="off" class="layui-input" lay-affix="clear">
</div>
</div>
<div class="layui-form-item">
<input type="checkbox" name="agreement" lay-verify="required" lay-skin="primary" title="同意">
<a href="#terms" target="_blank" style="position: relative; top: 6px; left: -15px;">
<ins>用户协议</ins>
</a>
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-reg">注册</button>
</div>
<div class="layui-form-item demo-reg-other">
<label>社交账号注册</label>
<span style="padding: 0 21px 0 6px;">
<a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
<a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
<a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
</span>
<a href="#login">登录已有帐号</a>
</div>
</div>
</form>
<!-- import layui -->
<script>
layui.use(function(){
var $ = layui.$;
var form = layui.form;
var layer = layui.layer;
var util = layui.util;
// 自定义验证规则
form.verify({
// 确认密码
confirmPassword: function(value, item){
var passwordValue = $('#reg-password').val();
if(value !== passwordValue){
return '两次密码输入不一致';
}
}
});
// 提交事件
form.on('submit(demo-reg)', function(data){
var field = data.field; // 获取表单字段值
// 是否勾选同意
if(!field.agreement){
layer.msg('您必须勾选同意用户协议才能注册');
return false;
}
// 显示填写结果，仅作演示用
layer.alert(JSON.stringify(field), {
title: '当前填写的字段值'
});
// 此处可执行 Ajax 等操作
// …
return false; // 阻止默认 form 跳转
});
// 普通事件
util.on('lay-on', {
// 获取验证码
'reg-get-vercode': function(othis){
var isvalid = form.validate('#reg-cellphone'); // 主动触发验证，v2.7.0 新增
// 验证通过
if(isvalid){
layer.msg('手机号规则验证通过');
// 此处可继续书写「发送验证码」等后续逻辑
// …
}
}
});
});
</script>

113
public/frontend/layui-main/docs/form/examples/form.val.md Executable file
View File

@@ -0,0 +1,113 @@
<form class="layui-form" action="" lay-filter="demo-val-filter">
<div class="layui-btn-container" style="margin-bottom: 6px; text-align: center;">
<button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-setval">赋值</button>
<button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-getval">取值</button>
</div>
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码框</label>
<div class="layui-input-block">
<input type="password" name="password" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" title="写作">
<input type="checkbox" name="like[read]" title="阅读">
<input type="checkbox" name="like[daze]" title="发呆">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男" checked>
<input type="radio" name="sex" value="女" title="女">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">文本域</label>
<div class="layui-input-block">
&lt;textarea placeholder="请输入" class="layui-textarea" name="desc"&gt;&lt;/textarea&gt;
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit lay-filter="demo-val">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<!-- import layui -->
<script>
layui.use(function(){
var $ = layui.$;
var form = layui.form;
// 表单赋值
$('#LAY-component-form-setval').on('click', function(){
form.val('demo-val-filter', {
"username": "贤心", // "name": "value"
"password": "AAAAAA",
"interest": 1,
"like[write]": true, // 复选框选中状态
"close": true, // 开关状态
"sex": "女",
"desc": "Layui 用于更简单快速地构建网页界面"
});
});
// 表单取值
layui.$('#LAY-component-form-getval').on('click', function(){
var data = form.val('demo-val-filter');
alert(JSON.stringify(data));
});
// 提交事件
form.on('submit(demo-val)', function(data){
var field = data.field; // 获取表单字段值
// 显示填写结果，仅作演示用
layer.alert(JSON.stringify(field), {
title: '当前填写的字段值'
});
// 此处可执行 Ajax 等操作
// …
return false; // 阻止默认 form 跳转
});
})
</script>

57
public/frontend/layui-main/docs/form/examples/form.validate.md Executable file
View File

@@ -0,0 +1,57 @@
<div class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">手机</label>
<div class="layui-input-block">
<input type="tel" name="phone" lay-verify="required|phone" class="layui-input" id="validate-phone">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">验证码</label>
<div class="layui-input-inline">
<input type="text" name="vercode" lay-verify="required" class="layui-input">
</div>
<div class="layui-inline">
<button type="button" class="layui-btn layui-btn-primary" id="validate-get-vercode">获取验证码</button>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="demo-validate">提交</button>
</div>
</div>
</div>
<!-- import layui -->
<script>
layui.use(function(){
var $ = layui.$;
var form = layui.form;
var layer = layui.layer;
// 点击获取验证码
$('#validate-get-vercode').on('click', function(){
var isValid = form.validate('#validate-phone'); // 主动触发验证，v2.7.0 新增
// 验证通过
if(isValid){
layer.msg('手机号规则验证通过');
// 此处可继续书写「发送验证码」等后续逻辑
// …
}
});
// 提交事件
form.on('submit(demo-validate)', function(data){
var field = data.field; // 获取表单字段值
// 显示填写结果，仅作演示用
layer.alert(JSON.stringify(field), {
title: '当前填写的字段值'
});
// 此处可执行 Ajax 等操作
// …
return false; // 阻止默认 form 跳转
});
});
</script>

52
public/frontend/layui-main/docs/form/examples/form.verify.md Executable file
View File

@@ -0,0 +1,52 @@
<form class="layui-form">
<input type="text" name="username" lay-verify="required|username" placeholder="用户名" class="layui-input">
<hr>
<input type="password" name="password" lay-verify="password" placeholder="密码" class="layui-input">
<hr>
<button class="layui-btn" lay-submit lay-filter="demo-verify">提交</button>
</form>
<!-- import layui -->
<script>
layui.use(function(){
var form = layui.form;
// 自定义验证规则，如下以验证用户名和密码为例
form.verify({
// 参数 value 为表单的值；参数 item 为表单元素
username: function(value, item){
if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
return '用户名不能有特殊字符';
}
if(/(^_)|(__)|(_+$)/.test(value)) return '用户名首尾不能出现 _ 下划线';
if(/^\d+$/.test(value)) return '用户名不能全为数字';
// 若不想自动弹出默认提示框，可返回 true，这时可通过其他提示方式替代（v2.5.7 新增）
if(value === 'xxx'){
alert('用户名不能为敏感词');
return true;
}
},
password: function(value) {
if (!/^[\S]{6,12}$/.test(value)) {
return '密码必须为 6 到 12 位的非空字符';
}
}
});
// 提交事件
form.on('submit(demo-verify)', function(data){
var field = data.field; // 获取表单字段值
// 显示填写结果，仅作演示用
layer.alert(JSON.stringify(field), {
title: '当前填写的字段值'
});
// 此处可执行 Ajax 等操作
// …
return false; // 阻止默认 form 跳转
});
})
</script>

40
public/frontend/layui-main/docs/form/examples/input.affix.custom.md Executable file
View File

@@ -0,0 +1,40 @@
<div class="layui-form">
<div class="layui-input-wrap">
<input type="text" lay-affix="location" lay-filter="location" placeholder="位置" class="layui-input">
</div>
<hr class="ws-space-16">
<div class="layui-input-wrap">
<input type="text" lay-affix="search" lay-filter="search" lay-options="{split: true}" placeholder="搜索…" class="layui-input">
</div>
</div>
<!-- import layui -->
<script>
layui.use(function(){
var form = layui.form;
// 输入框点缀事件 - 位置示例
form.on('input-affix(location)', function(data){
var elem = data.elem; // 输入框
// do something
layer.msg('模拟获取位置中…', {icon: 16, time: 1.5*1000}, function(){
elem.value = '浙江杭州'; // 向输入框赋值
})
});
// 输入框点缀事件 - 搜索示例
form.on('input-affix(search)', function(data){
var elem = data.elem; // 输入框
var value = elem.value; // 输入框的值
if(!value){
layer.msg('请输入搜索内容');
return elem.focus()
};
// 模拟搜索跳转
location.href = '?keywords='+ value + '&_'+ new Date().getTime() +'#affix-custom';
});
});
</script>

84
public/frontend/layui-main/docs/form/examples/input.group.md Executable file
View File

@@ -0,0 +1,84 @@
<div class="layui-form">
<div class="layui-form-item">
<div class="layui-input-group">
<div class="layui-input-split layui-input-prefix">
身高
</div>
<input type="text" placeholder="带任意前置和后置内容" class="layui-input">
<div class="layui-input-split layui-input-suffix">
cm
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-group">
<div class="layui-input-split layui-input-prefix">
手机号
</div>
<input type="text" placeholder="带任意前置和后置内容" class="layui-input">
<div class="layui-input-suffix">
<button class="layui-btn layui-btn-primary">一个按钮</button>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-group">
<div class="layui-input-split layui-input-prefix">
用户名
</div>
<input type="text" placeholder="带任意前置内容" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-group">
<input type="text" placeholder="带任意后置内容" class="layui-input">
<div class="layui-input-split layui-input-suffix" style="cursor: pointer;">
<i class="layui-icon layui-icon-search"></i>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-group">
<div class="layui-input-prefix">
搜索
</div>
<input type="text" placeholder="带任意前置和后置内容" class="layui-input">
<div class="layui-input-split layui-input-suffix" style="cursor: pointer;">
<i class="layui-icon layui-icon-search"></i>
</div>
</div>
</div>
<hr style="margin: 32px 0;">
<div class="layui-form-item">
<div class="layui-input-group">
<div class="layui-input-prefix">
身高
</div>
<input type="text" placeholder="前置和后置无分割框" class="layui-input">
<div class="layui-input-suffix">
cm
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-group">
<div class="layui-input-prefix">
昵称
</div>
<input type="text" placeholder="带前置且无分割框" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-group">
<input type="text" placeholder="带后置且无分割框" class="layui-input">
<div class="layui-input-suffix">
<i class="layui-icon layui-icon-tips"></i> 任意后置内容
</div>
</div>
</div>
</div>
<!-- import layui -->

96
public/frontend/layui-main/docs/form/examples/input.pre.suf.md Executable file
View File

@@ -0,0 +1,96 @@
<div class="layui-form">
<div class="layui-row layui-col-space16">
<div class="layui-col-md4">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
</div>
<input type="text" placeholder="带前缀" class="layui-input">
</div>
</div>
<div class="layui-col-md4">
<div class="layui-input-wrap">
<input type="text" placeholder="带后缀" class="layui-input">
<div class="layui-input-suffix">
<i class="layui-icon layui-icon-more-vertical"></i>
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-date"></i>
</div>
<input type="text" placeholder="带前缀和后缀" class="layui-input">
<div class="layui-input-suffix">
<i class="layui-icon layui-icon-down"></i>
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-input-wrap">
<div class="layui-input-prefix layui-input-split">
<i class="layui-icon layui-icon-password"></i>
</div>
<input type="password" placeholder="带前缀加分隔框" class="layui-input">
</div>
</div>
<div class="layui-col-md4">
<div class="layui-input-wrap">
<input type="text" placeholder="带后缀加分隔框" class="layui-input">
<div class="layui-input-suffix layui-input-split">
<i class="layui-icon layui-icon-down"></i>
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-input-wrap">
<div class="layui-input-prefix layui-input-split">
<i class="layui-icon layui-icon-date"></i>
</div>
<input type="text" placeholder="带前缀和后缀加分割框" class="layui-input">
<div class="layui-input-suffix layui-input-split">
<i class="layui-icon layui-icon-down"></i>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-location"></i>
</div>
<input type="text" placeholder="带前缀无分割框和后缀有分割框" class="layui-input">
<div class="layui-input-suffix layui-input-split">
<i class="layui-icon layui-icon-edit"></i>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-input-wrap">
<div class="layui-input-prefix layui-input-split">
<i class="layui-icon layui-icon-location"></i>
</div>
<input type="text" placeholder="带前缀有分割框和后缀无分割框" class="layui-input">
<div class="layui-input-suffix">
<i class="layui-icon layui-icon-edit"></i>
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-form"></i>
</div>
<select>
<option value="">放置 select 元素</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select>
</div>
</div>
</div>
</div>
<!-- import layui -->