mirror of
https://github.com/layui/layui.git
synced 2026-02-09 10:19:20 +08:00
5ab142153b
* style: 统一代码格式，修复ESLint错误 - 为所有模块添加尾随逗号 - 修复缺少分号的语句 - 统一对象字面量格式 - 添加ESLint配置文件和文档 - 更新package.json中的脚本和依赖项 * build: 添加 ESLint 配置文件以支持 IE9+ 兼容性 * refactor(upload): 使用已缓存的hint实例替换直接调用 优化代码性能，避免重复实例化hint对象，直接使用模块顶部已缓存的实例 * chore: 更新.gitignore文件以包含更多忽略规则 添加了更多常见的临时文件、编辑器文件、构建输出目录和运行时数据的忽略规则，使项目更加整洁并避免不必要的文件被提交到版本控制中 * fix(lay.js): 修复passive事件监听器选项的返回值 确保getter函数返回true以正确支持passive事件监听 * refactor(form): 移除表单模块中的冗余代码 删除表单模块中无实际作用的冗余代码行，这些代码只是将属性重新赋值为自身，没有实际功能意义 * fix(form): 修复复选框状态处理逻辑 确保复选框的 indeterminate 和 checked 状态被正确转换为布尔值，并优化事件调用时的空格格式 * feat(eslint): 完善 ESLint 配置并添加 VSCode 支持 添加 VSCode 配置文件以支持 ESLint 自动修复和格式化 更新 ESLint 配置，增强代码风格和兼容性规则 修复 package.json 中的脚本拼写错误并添加 format 脚本 调整 .gitignore 以允许特定 VSCode 配置文件 * style: 统一代码中的引号格式并修复缩进问题 统一将双引号改为单引号，修复部分代码缩进不一致的问题，提升代码风格一致性 * docs: 删除过时的ESLint配置文档文件 * build: 采用 prettier 作为代码格式化工具，剔除 ESLint 格式化部分 * chore: 剔除 .vscode/ 配置，保持编辑器中立 * build: 修改 ESLint 为「扁平化配置」方式，避免大量参数堆砌 * chore: 格式化代码 * ci: 添加 git hooks 和 CI 环节把关代码风格 * ci: update * ci: update * test: 测试 ci format * ci: 改用 husky 作为 git hooks，与 Layui 3 保持一致 经测试，simple-git-hooks 生成的 pre-commit 默认为 sh，在 Windows 不兼容（必须用 git bash 执行 commits） * build: 新增 CI 和生产环境跳过 husky 安装的判断 * build: 剔除重复配置 * build: 优化 eslint 配置 --------- Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>
819 lines
26 KiB
HTML
819 lines
26 KiB
HTML
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>表单模块 - layui</title>
|
||
<meta name="renderer" content="webkit" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||
<meta
|
||
name="viewport"
|
||
content="width=device-width, initial-scale=1, maximum-scale=1"
|
||
/>
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||
<meta name="format-detection" content="telephone=no" />
|
||
|
||
<link rel="stylesheet" href="../src/css/layui.css" />
|
||
<style>
|
||
body {
|
||
padding: 16px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<form class="layui-form" method="get" lay-filter="top">
|
||
<div class="layui-row layui-col-space16">
|
||
<div class="layui-col-md3">
|
||
<div class="layui-input-group">
|
||
<div class="layui-input-split layui-input-prefix">前置信息</div>
|
||
<input
|
||
type="text"
|
||
name="arr[]"
|
||
required
|
||
lay-verify="required"
|
||
placeholder="请输入"
|
||
autocomplete="off"
|
||
class="layui-input"
|
||
lay-affix="clear"
|
||
/>
|
||
<div class="layui-input-split layui-input-suffix">后置信息</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md3">
|
||
<div class="layui-input-wrap">
|
||
<input
|
||
type="text"
|
||
name="arr[]"
|
||
required
|
||
placeholder="请输入"
|
||
autocomplete="off"
|
||
class="layui-input"
|
||
/>
|
||
<div class="layui-input-split">
|
||
<i class="layui-icon layui-icon-down"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md3">
|
||
<div class="layui-input-wrap">
|
||
<div class="layui-input-prefix">
|
||
<i class="layui-icon layui-icon-username"></i>
|
||
</div>
|
||
<input
|
||
type="text"
|
||
name="arr[]"
|
||
value=""
|
||
required
|
||
placeholder="请输入"
|
||
autocomplete="off"
|
||
class="layui-input"
|
||
lay-affix="clear"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md3">
|
||
<div class="layui-input-wrap">
|
||
<div class="layui-input-prefix">
|
||
<i class="layui-icon layui-icon-password"></i>
|
||
</div>
|
||
<input
|
||
type="password"
|
||
name="arr[]"
|
||
value=""
|
||
required
|
||
placeholder="请输入"
|
||
autocomplete="off"
|
||
class="layui-input"
|
||
lay-affix="eye"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md3">
|
||
<div class="layui-input-wrap">
|
||
<input
|
||
type="text"
|
||
name="arr[]"
|
||
value=""
|
||
required
|
||
placeholder="自定义动态点缀图标"
|
||
autocomplete="off"
|
||
class="layui-input"
|
||
lay-affix="set"
|
||
lay-filter="set"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md3">
|
||
<div class="layui-input-wrap">
|
||
<div class="layui-input-prefix layui-input-split">
|
||
<i class="layui-icon layui-icon-username"></i>
|
||
</div>
|
||
<input
|
||
type="text"
|
||
name="arr[]"
|
||
value=""
|
||
required
|
||
placeholder="请输入"
|
||
autocomplete="off"
|
||
class="layui-input"
|
||
lay-affix="clear"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md3">
|
||
<div class="layui-input-wrap">
|
||
<input
|
||
type="text"
|
||
name="arr[]"
|
||
value=""
|
||
required
|
||
placeholder="请输入"
|
||
autocomplete="off"
|
||
class="layui-input"
|
||
lay-affix="clear"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md3">
|
||
<div class="layui-input-wrap">
|
||
<input
|
||
type="text"
|
||
name="arr[]"
|
||
value="禁用或只读状态"
|
||
disabled
|
||
placeholder="请输入"
|
||
autocomplete="off"
|
||
class="layui-input"
|
||
lay-affix="clear"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md3">
|
||
<div class="layui-input-wrap">
|
||
<div class="layui-input-prefix">
|
||
<i class="layui-icon layui-icon-date"></i>
|
||
</div>
|
||
<input
|
||
type="text"
|
||
name="arr[]"
|
||
required
|
||
placeholder="前缀和后缀"
|
||
autocomplete="off"
|
||
class="layui-input"
|
||
/>
|
||
<div class="layui-input-suffix">
|
||
<i class="layui-icon layui-icon-down"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md3">
|
||
<div class="layui-input-wrap">
|
||
<input
|
||
type="text"
|
||
name="arr[]"
|
||
required
|
||
placeholder="后缀+clear"
|
||
lay-affix="clear"
|
||
autocomplete="off"
|
||
class="layui-input"
|
||
/>
|
||
<div class="layui-input-suffix">
|
||
<i class="layui-icon layui-icon-more-vertical"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md3">
|
||
<div class="layui-input-wrap">
|
||
<div class="layui-input-prefix">
|
||
<i class="layui-icon layui-icon-username"></i>
|
||
</div>
|
||
<select name="selectdemo">
|
||
<option value="">在 select 中使用</option>
|
||
<option value="北京">北京</option>
|
||
<option value="上海">上海</option>
|
||
<option value="广州">广州</option>
|
||
<option value="深圳">深圳</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md3">
|
||
<div class="layui-input-wrap">
|
||
<div class="layui-input-prefix">
|
||
<i class="layui-icon layui-icon-date"></i>
|
||
</div>
|
||
<input
|
||
type="text"
|
||
name="arr[]"
|
||
required
|
||
placeholder="前缀和后缀+动态点缀"
|
||
autocomplete="off"
|
||
class="layui-input"
|
||
lay-affix="clear"
|
||
/>
|
||
<div class="layui-input-suffix">
|
||
<i class="layui-icon layui-icon-down"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md3">
|
||
<input
|
||
type="number"
|
||
value="1.1"
|
||
lay-precision="0"
|
||
name="arr[]"
|
||
required
|
||
placeholder="数字输入框"
|
||
lay-affix="number"
|
||
autocomplete="off"
|
||
class="layui-input"
|
||
/>
|
||
</div>
|
||
<div class="layui-col-md3">
|
||
<input
|
||
type="number"
|
||
step="0.01"
|
||
min="0"
|
||
max="10"
|
||
name="arr[]"
|
||
required
|
||
placeholder="数字输入框"
|
||
lay-affix="number"
|
||
autocomplete="off"
|
||
class="layui-input"
|
||
/>
|
||
</div>
|
||
<div class="layui-col-md3">
|
||
<input
|
||
type="number"
|
||
step="0.01"
|
||
min="0"
|
||
max="10"
|
||
name="arr[]"
|
||
required
|
||
placeholder="系统自带数字输入框"
|
||
autocomplete="off"
|
||
class="layui-input"
|
||
/>
|
||
</div>
|
||
<div class="layui-col-md3">
|
||
<input
|
||
type="number"
|
||
disabled
|
||
name="arr[]"
|
||
required
|
||
placeholder="数字输入框 禁用状态"
|
||
lay-affix="number"
|
||
autocomplete="off"
|
||
class="layui-input"
|
||
/>
|
||
</div>
|
||
<div class="layui-col-md12">
|
||
<div class="layui-input-wrap">
|
||
<textarea class="layui-textarea" lay-affix="clear"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md12">
|
||
<button class="layui-btn" id="testSubmit">立即提交</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
<hr />
|
||
|
||
<form class="layui-form layui-form-pane1" action="" lay-filter="first">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">输入框</label>
|
||
<div class="layui-input-block">
|
||
<input
|
||
type="text"
|
||
name="title"
|
||
lay-verify="required|title"
|
||
lay-reqText="标题不能为空"
|
||
required
|
||
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="tel"
|
||
name="phone"
|
||
lay-verify="required|phone"
|
||
autocomplete="off"
|
||
class="layui-input demo-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"
|
||
autocomplete="off"
|
||
class="layui-input"
|
||
/>
|
||
</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 class="layui-form-item">
|
||
<label class="layui-form-label">邮箱</label>
|
||
<div class="layui-input-block">
|
||
<input
|
||
type="email"
|
||
name="email"
|
||
lay-verify="email"
|
||
lay-vertype="alert"
|
||
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="date"
|
||
id="date"
|
||
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-inline">
|
||
<input
|
||
type="password"
|
||
name="password"
|
||
lay-verify="required|pass"
|
||
placeholder="请输入密码"
|
||
autocomplete="off"
|
||
class="layui-input"
|
||
/>
|
||
</div>
|
||
<div class="layui-form-mid layui-word-aux">请务必填写用户名</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 class="layui-inline">
|
||
<label class="layui-form-label">行内表单</label>
|
||
<div class="layui-input-block">
|
||
<select
|
||
name="quiz"
|
||
lay-verify="required"
|
||
lay-vertype="tips"
|
||
lay-filter="quiz"
|
||
>
|
||
<option value="">请"选择"问题 😀</option>
|
||
<option value="0">你工"作"的 第一个城市</option>
|
||
<option value="1" disabled>你的工号</option>
|
||
<option value="2">你最喜欢的老师</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">select分组</label>
|
||
<div class="layui-input-block">
|
||
<select name="quiz111" lay-filter="quiz111">
|
||
<option value="">请选择问题</option>
|
||
<optgroup label="城市记忆">
|
||
<option value="0">你工作的第一个城市</option>
|
||
</optgroup>
|
||
<optgroup label="学生时代">
|
||
<option value="1" disabled>你的工号</option>
|
||
<option value="2">你最喜欢的老师</option>
|
||
</optgroup>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">选择框</label>
|
||
<div class="layui-input-block">
|
||
<select name="interest" lay-filter="interest">
|
||
<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">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">搜索选择框</label>
|
||
<div class="layui-input-block">
|
||
<select
|
||
name="interest-search"
|
||
lay-filter="interest-search"
|
||
lay-search=""
|
||
lay-creatable
|
||
>
|
||
<option value="">请搜索</option>
|
||
<option value="写作">写"作"</option>
|
||
<option value="阅读" disabled>阅读</option>
|
||
<option value="游戏" disabled>游戏</option>
|
||
<option value="音乐">音乐</option>
|
||
<option value="旅行">旅行</option>
|
||
<option value="读书">读书</option>
|
||
<option value="1">layer</option>
|
||
<option value="2" disabled>laydate</option>
|
||
<option value="3">3</option>
|
||
<option value="4">layim</option>
|
||
<option value="5">laypage</option>
|
||
<option value="6">6</option>
|
||
<option value="7">7</option>
|
||
<option value="8">8</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">搜索分组框</label>
|
||
<div class="layui-input-block">
|
||
<select
|
||
name="interest-search-group"
|
||
lay-filter="interest-search-group"
|
||
lay-search=""
|
||
>
|
||
<option value="">请搜索</option>
|
||
<optgroup label="分组a">
|
||
<option value="a1">a1</option>
|
||
<option value="a2">a2</option>
|
||
</optgroup>
|
||
<optgroup label="分组aa">
|
||
<option value="aa1">aA1</option>
|
||
<option value="aa2">aA2</option>
|
||
</optgroup>
|
||
<optgroup label="分组b">
|
||
<option value="b1">b1</option>
|
||
<option value="b2">b2</option>
|
||
</optgroup>
|
||
<optgroup label="分组bb">
|
||
<option value="bb1">bb1</option>
|
||
<option value="bb2">bb2</option>
|
||
</optgroup>
|
||
<optgroup label="分组bbb">
|
||
<option value="bbb1">bBb1</option>
|
||
<option value="bbb2">bBB2</option>
|
||
</optgroup>
|
||
<optgroup label="分组c">
|
||
<option value="c1">c1</option>
|
||
<option value="c2">c2</option>
|
||
</optgroup>
|
||
<optgroup label="分组cc">
|
||
<option value="cc1">cc1</option>
|
||
<option value="cc2">cc2</option>
|
||
</optgroup>
|
||
<optgroup label="分组ccc">
|
||
<option value="ccc1">ccc1</option>
|
||
<option value="ccc2">ccc2</option>
|
||
</optgroup>
|
||
<optgroup label="分组cccc">
|
||
<option value="cccc1">cccc1</option>
|
||
<option value="cccc2">cccc2</option>
|
||
</optgroup>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item" pane>
|
||
<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[game]" title="游戏" disabled />
|
||
<input
|
||
type="checkbox"
|
||
name="like[indeterminate]"
|
||
id="ID-indeterminate"
|
||
lay-filter="filter-indeterminate"
|
||
title="半选"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item" pane>
|
||
<label class="layui-form-label">标签框</label>
|
||
<div class="layui-input-block">
|
||
<input
|
||
type="checkbox"
|
||
name="like1[write]"
|
||
lay-skin="tag"
|
||
title="写作"
|
||
/>
|
||
<input
|
||
type="checkbox"
|
||
name="like1[read]"
|
||
lay-skin="tag"
|
||
title="阅读"
|
||
/>
|
||
<input
|
||
type="checkbox"
|
||
name="like1[game]"
|
||
lay-skin="tag"
|
||
title="游戏"
|
||
disabled
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item" pane>
|
||
<label class="layui-form-label">开关关</label>
|
||
<div class="layui-input-block">
|
||
<input type="checkbox" name="close" lay-skin="switch" title="开关" />
|
||
<input
|
||
type="checkbox"
|
||
name="close2"
|
||
lay-skin="switch"
|
||
title="|OFF"
|
||
disabled
|
||
/>
|
||
</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="ON|OFF"
|
||
/>
|
||
<input
|
||
type="checkbox"
|
||
name="open2"
|
||
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="1" title="男" />
|
||
<input type="radio" name="sex" value="0" title="女" checked />
|
||
<input type="radio" name="sex" value="-1" />
|
||
<div lay-radio>保密 <i class="layui-icon layui-icon-user"></i></div>
|
||
<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">
|
||
<textarea
|
||
placeholder="请输入内容"
|
||
class="layui-textarea"
|
||
name="desc"
|
||
></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<div class="layui-input-block">
|
||
<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
|
||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
<br /><br /><br />
|
||
|
||
<script
|
||
src="../src/layui.js"
|
||
src1="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.js"
|
||
></script>
|
||
<script>
|
||
layui.use(['form', 'util', 'laydate'], function () {
|
||
var $ = layui.$;
|
||
var form = layui.form;
|
||
var layer = layui.layer;
|
||
var util = layui.util;
|
||
var laydate = layui.laydate;
|
||
|
||
// 自定义验证规则
|
||
form.verify({
|
||
title: function (value) {
|
||
if (value && value.length < 5) {
|
||
// 值若填写时才校验
|
||
return '标题也太短了吧';
|
||
}
|
||
},
|
||
pass: function (value) {
|
||
if (!/(.+){6,12}$/.test(value)) {
|
||
return '密码必须 6 到 12 位';
|
||
}
|
||
},
|
||
amount: function (value) {
|
||
if (value && !/^\d+\.\b\d{2}\b$/.test(value)) {
|
||
// 值若填写时才校验
|
||
return '金额必须为小数保留两位';
|
||
}
|
||
}
|
||
});
|
||
|
||
/*
|
||
form.on('submit(top)', function(data){
|
||
console.log(data);
|
||
return false;
|
||
});
|
||
*/
|
||
|
||
//方法提交
|
||
$('#testSubmit').on('click', function () {
|
||
form.submit('top', function (data) {
|
||
layer.confirm('确定提交么？', function (index) {
|
||
layer.close(index);
|
||
|
||
// 验证均通过后执行提交
|
||
setTimeout(function () {
|
||
alert(JSON.stringify(data.field));
|
||
});
|
||
});
|
||
});
|
||
return false;
|
||
});
|
||
|
||
//日期
|
||
laydate.render({
|
||
elem: '#date'
|
||
});
|
||
|
||
//初始赋值
|
||
var thisValue = form.val('first', {
|
||
title: '测试测试测试',
|
||
//,'phone': 11111111111
|
||
email: 'xu@sentsin.com',
|
||
date: '2021-05-30',
|
||
password: 123123,
|
||
//,'quiz': 2
|
||
interest: 3,
|
||
'like[write]': true,
|
||
//,'open': false
|
||
sex: '0',
|
||
desc: 'form 是我们非常看重的一块',
|
||
xxxxxxxxx: 123
|
||
});
|
||
|
||
// 自定义动态点缀事件
|
||
form.on('input-affix(set)', function (data) {
|
||
var elem = data.elem;
|
||
elem.value = '通过自定义事件设置的值';
|
||
});
|
||
|
||
//事件
|
||
form.on('select(quiz)', function (data) {
|
||
console.log('select.quiz: ', this, data);
|
||
});
|
||
|
||
form.on('select(quiz111)', function (data) {
|
||
console.log('select.quiz111：', this, data);
|
||
});
|
||
|
||
form.on('select(interest)', function (data) {
|
||
console.log('select.interest: ', this, data);
|
||
});
|
||
|
||
form.on('checkbox', function (data) {
|
||
console.log(this.checked, data.elem.checked);
|
||
});
|
||
|
||
form.on('switch', function (data) {
|
||
console.log(data);
|
||
});
|
||
|
||
form.on('radio', function (data) {
|
||
console.log(data);
|
||
});
|
||
|
||
// 提交事件
|
||
form.on('submit(*)', function (data) {
|
||
console.log(data);
|
||
alert(JSON.stringify(data.field));
|
||
return false;
|
||
});
|
||
|
||
// 设置半选
|
||
$('#ID-indeterminate').prop('indeterminate', true);
|
||
form.render('checkbox');
|
||
|
||
// 普通事件
|
||
util.on('lay-on', {
|
||
'get-vercode': function (othis) {
|
||
var isvalid = form.validate('.demo-phone');
|
||
|
||
// 验证通过
|
||
if (isvalid) {
|
||
layer.msg('手机号验证通过，执行发送验证码的操作');
|
||
}
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<h3>设置 lay-ignore 忽略渲染</h3>
|
||
<hr />
|
||
<div class="layui-form">
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">未设置 ignore 时：</div>
|
||
<div class="layui-inline">
|
||
<input type="checkbox" name="like[write]" title="checkbox" />
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">忽略指令直接设置：</div>
|
||
<div class="layui-inline">
|
||
<input type="checkbox" name="like[write]" lay-ignore title="写作" />
|
||
<input type="radio" name="sex" value="1" lay-ignore title="男" />
|
||
<select name="quiz" lay-ignore>
|
||
<option value="">请选择</option>
|
||
<option value="AAAAA" selected>AAAAA</option>
|
||
<option value="BBBBB">BBBBB</option>
|
||
<option value="CCCCC">CCCCC</option>
|
||
<option value="DDDDD" disabled>DDDDD</option>
|
||
<option value="EEEEE">EEEEE</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">忽略指令父元素设置：</div>
|
||
<div class="layui-inline" lay-ignore>
|
||
<input type="checkbox" name="like[write]" title="写作" />
|
||
<input type="radio" name="sex" value="1" title="男" />
|
||
<select name="quiz111">
|
||
<option value="">请选择</option>
|
||
<option value="AAAAA">AAAAA</option>
|
||
<option value="BBBBB">BBBBB</option>
|
||
<option value="CCCCC" selected>CCCCC</option>
|
||
<option value="DDDDD" disabled>DDDDD</option>
|
||
<option value="EEEEE">EEEEE</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>原始表单调试：</h3>
|
||
<hr />
|
||
<form id="test1" action="" target="_blank">
|
||
<input type="radio" value="girl" disabled />
|
||
<input type="checkbox" name="love[a]" />
|
||
<input type="checkbox" name="love[b]" />
|
||
<input value="1" />
|
||
<input name="as" />
|
||
<input name="=" value="2" />
|
||
<select name="quiz">
|
||
<option value="">请选择问题</option>
|
||
<option disabled value="你工作的第一个城市">你工作的第一个城市</option>
|
||
<option value="你的工号">你的工号</option>
|
||
<option value="你最喜欢的老师">你最喜欢的老师</option>
|
||
<option value="你的工号" selected>你的工号</option>
|
||
<option value="你的工号">你的工号</option>
|
||
</select>
|
||
<button type="submit">原始表单，测试提交</button>
|
||
</form>
|
||
|
||
<br /><br />
|
||
</body>
|
||
</html>
|