layui 常見的表單元素

時間 2019-11-21

原文原文鏈接

第一步:引用文件html

效果圖(日期、文件上傳在下面)：jquery

<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="title" required lay-verify="required" placeholder="請輸入標題" 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" required lay-verify="required" placeholder="請輸入密碼" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">輔助文字</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">選擇框</label>
<div class="layui-input-block">
<select name="city" lay-verify="required">
<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="閱讀" checked>
<input type="checkbox" name="like[dai]" title="發呆">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">開關</label>
<div class="layui-input-block">
<input type="checkbox" name="switch" lay-skin="switch">
</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="男">
<input type="radio" name="sex" value="女" title="女" checked>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">文本域</label>
<div class="layui-input-block">
<textarea name="desc" placeholder="請輸入內容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">當即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>

<script>
//Demo
layui.use('form', function () {
var form = layui.form();

//監聽提交
form.on('submit(formDemo)', function (data) {
layer.msg(JSON.stringify(data.field));
return false;
});
});
</script>

日期選擇效果圖：app

<body>
<!--layui各類日期對象-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>常規用法</legend>
</fieldset>

<div class="layui-form">
<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="test1" placeholder="yyyy-MM-dd">
</div>
</div>
</div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>範圍選擇</legend>
</fieldset>

<div class="layui-form">
<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="test6" placeholder=" - ">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">年範圍</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test7" placeholder=" - ">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">年月範圍</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test8" placeholder=" - ">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">時間範圍</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test9" placeholder=" - ">
</div>
</div>
</div>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>自定義格式</legend>
</fieldset>

<div class="layui-form">
<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="test11" placeholder="yyyy年MM月dd日">
</div>
</div>
</div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>同時綁定多個</legend>
</fieldset>

<div class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<input type="text" class="layui-input test-item" placeholder="yyyy-MM-dd">
</div>
<div class="layui-inline">
<input type="text" class="layui-input test-item" placeholder="yyyy-MM-dd">
</div>
</div>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>其它功能示例</legend>
</fieldset>

<div class="layui-form">
<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="test19" placeholder="yyyy-MM-dd">
</div>
</div>

<div class="layui-inline">
<label class="layui-form-label">不出現底部欄</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test22" placeholder="yyyy-MM-dd">
</div>
</div>


<div class="layui-inline">
<label class="layui-form-label" id="test25-1">點我觸發</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test25" placeholder="yyyy-MM-dd">
</div>
</div>
</div>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>其它主題</legend>
</fieldset>

<div class="layui-form">
<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="test29" placeholder="yyyy-MM-dd">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">自定義顏色主題</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test30" placeholder="yyyy-MM-dd">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">格子主題</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test31" placeholder="yyyy-MM-dd">
</div>
</div>
</div>
</div>

<script src="layui-v2.2.5/layui-v2.2.5/layui/layui.js"></script>
<!-- 注意：若是你直接複製全部代碼到本地，上述js路徑須要改爲你本地的 -->
<script>
layui.use('laydate', function () {
var laydate = layui.laydate;
//常規用法
laydate.render({
elem: '#test1'
});
//日期範圍
laydate.render({
elem: '#test6'
, range: true
});
//年範圍
laydate.render({
elem: '#test7'
, type: 'year'
, range: true
});
//年月範圍
laydate.render({
elem: '#test8'
, type: 'month'
, range: true
});
//時間範圍
laydate.render({
elem: '#test9'
, type: 'time'
, range: true
});
//自定義格式
laydate.render({
elem: '#test11'
, format: 'yyyy年MM月dd日'
});
//同時綁定多個
lay('.test-item').each(function () {
laydate.render({
elem: this
, trigger: 'click'
});
});
//初始賦值
laydate.render({
elem: '#test19'
, value: '1989-10-14'
});
//不出現底部欄
laydate.render({
elem: '#test22'
, showBottom: false
});
//點我觸發
laydate.render({
elem: '#test25'
, eventElem: '#test25-1'
, trigger: 'click'
});
//日期只讀
laydate.render({
elem: '#test27'
, trigger: 'click'
});
//墨綠主題
laydate.render({
elem: '#test29'
, theme: 'molv'
});
//自定義顏色
laydate.render({
elem: '#test30'
, theme: '#393D49'
});
//格子主題
laydate.render({
elem: '#test31'
, theme: 'grid'
});
});
</script>
<!--layui各類日期對象-->
</body>

上傳文件效果圖:ui

<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>常規使用：普通圖片上傳</legend>
</fieldset>

<div class="layui-upload">
<button type="button" class="layui-btn" id="test1">上傳圖片</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1">
<p id="demoText"></p>
</div>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>上傳多張圖片</legend>
</fieldset>

<div class="layui-upload">
<button type="button" class="layui-btn" id="test2">多圖片上傳</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
預覽圖：
<div class="layui-upload-list" id="demo2"></div>
</blockquote>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>指定容許上傳的文件類型</legend>
</fieldset>

<button type="button" class="layui-btn" id="test3"><i class="layui-icon"></i>上傳文件</button>
<button type="button" class="layui-btn layui-btn-primary" id="test4"><i class="layui-icon"></i>只容許壓縮文件</button>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>設定文件大小限制</legend>
</fieldset>

<button type="button" class="layui-btn layui-btn-danger" id="test7"><i class="layui-icon"></i>上傳圖片</button>
<div class="layui-inline layui-word-aux">
這裏以限制 60KB 爲例
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>選完文件後不自動上傳</legend>
</fieldset>

<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" id="test8">選擇文件</button>
<button type="button" class="layui-btn" id="test9">開始上傳</button>
</div>

<script src="layui-v2.2.5/layui-v2.2.5/layui/layui.js"></script>
<!-- 注意：若是你直接複製全部代碼到本地，上述js路徑須要改爲你本地的 -->
<script>
layui.use('upload', function () {
var $ = layui.jquery
, upload = layui.upload;

//普通圖片上傳
var uploadInst = upload.render({
elem: '#test1'
, url: '/upload/'
, before: function (obj) {
//預讀本地文件示例，不支持ie8
obj.preview(function (index, file, result) {
$('#demo1').attr('src', result); //圖片連接（base64）
});
}
, done: function (res) {
//若是上傳失敗
if (res.code > 0) {
return layer.msg('上傳失敗');
}
//上傳成功
}
, error: function () {
//演示失敗狀態，並實現重傳
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-mini demo-reload">重試</a>');
demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
}
});

//多圖片上傳
upload.render({
elem: '#test2'
, url: '/upload/'
, multiple: true
, before: function (obj) {
//預讀本地文件示例，不支持ie8
obj.preview(function (index, file, result) {
$('#demo2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
});
}
, done: function (res) {
//上傳完畢
}
});

//指定容許上傳的文件類型
upload.render({
elem: '#test3'
, url: '/upload/'
, accept: 'file' //普通文件
, done: function (res) {
console.log(res)
}
});
upload.render({ //容許上傳的文件後綴
elem: '#test4'
, url: '/upload/'
, accept: 'file' //普通文件
, exts: 'zip|rar|7z' //只容許上傳壓縮文件
, done: function (res) {
console.log(res)
}
});
//設定文件大小限制
upload.render({
elem: '#test7'
, url: '/upload/'
, size: 60 //限制文件大小，單位 KB
, done: function (res) {
console.log(res)
}
});
//選完文件後不自動上傳
upload.render({
elem: '#test8'
, url: '/upload/'
, auto: false
//,multiple: true
, bindAction: '#test9'
, done: function (res) {
console.log(res)
}
});
});
</script>

</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。