github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
一套开源的 Web UI 组件库。采用自身极简的模块化规范，并遵循原生 HTML/CSS/JS 的开发模式，极易上手，开箱即用。非常适合网页界面的快速构建。
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2321 Commits
2 Branches
130 Tags
42 MiB
 
 
Branch: main
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'main'
${ noResults }
layui/examples/form.html

529 lines
20 KiB
Raw Permalink Blame History

<!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="quiz111">
<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="quiz" lay-filter="quiz">
<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="">
<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(quiz111)', function(data){
console.log('select: ', this, data);
});
form.on('select(quiz)', function(data){
console.log('select.quiz：', 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>原始表单调试：</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>
</body>
</html>