碼上快樂

相關內容    簡體    繁體

layui表單2(form)

本文轉載自   查看原文   2019-06-19 22:11   746 

其實這里才算真正的form的重點。下面來一樣測試並且配上截圖。

首先來展示下官網的例子得到的造型：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../layui/css/layui.css" rel="stylesheet" />
<script src="../Scripts/jquery-3.3.1.js"></script>
<script src="../layui/layui.js"></script>
</head>
<body>
<div class="layui-form">
<!-- 提示：如果你不想用form，你可以換成div等任何一個普通元素 -->
<div class="layui-row">
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">輸入框</label>
<div class="layui-input-block">
<input type="text" name="" placeholder="請輸入" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">下拉選擇框</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value="0">寫作</option>
<option value="1">閱讀</option>
</select>
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md4">
<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="閱讀">
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">開關關</label>
<div class="layui-input-block">
<input type="checkbox" lay-skin="switch">
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">開關開</label>
<div class="layui-input-block">
<input type="checkbox" checked lay-skin="switch">
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">單選框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="0" title="男">
<input type="radio" name="sex" value="1" title="女" checked>
</div>
</div>
</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"></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>
<!-- 更多表單結構排版請移步文檔左側【頁面元素-表單】一項閱覽 -->
</div>
<script>
layui.use('form', function () {
var form = layui.form;

//各種基於事件的操作，下面會有進一步介紹
});
</script>
</body>
</html>

這里的樣式就是官網的模型稍微改動了下。下面是截圖：

***注意的點：表單體系所在的父元素加上class="layui-form"。

 

***接下來我們看一下相關的更新渲染。有些時候，你的有些表單元素可能是動態插入的。這時 form 模塊 的自動化渲染是會對其失效的。雖然我們沒有雙向綁定機制（因為我們叫經典模塊化框架，偷笑.gif） 但沒有關系，你只需要執行 form.render(type, filter); 方法即可。這個很重要 。經常會出現動態綁定了下拉框但是死活出不來的情況。下面來演示一波。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../layui/css/layui.css" rel="stylesheet" />
<script src="../Scripts/jquery-3.3.1.js"></script>
<script src="../layui/layui.js"></script>
</head>
<body>
<div class="layui-form" lay-filter="aihao">
<!-- 提示：如果你不想用form，你可以換成div等任何一個普通元素 -->
<div class="layui-row">
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">下拉選擇框</label>
<div class="layui-input-block">
<select name="interest" id="aihao" ></select>
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">按鈕</label>
<div class="layui-input-block">
<button class="layui-btn" id="btnInitCombox">立即提交</button>
</div>
</div>
</div>
</div>
</div>
<script>
layui.use('form', function () {
var form = layui.form;
$(function () {
$("#btnInitCombox").click(function () {
alert(1111);
$('#aihao').append(new Option("A", 1));
$('#aihao').append(new Option("B", 2));
$('#aihao').append(new Option("C", 3));
//form.render('select', 'aihao')
});

});
//各種基於事件的操作，下面會有進一步介紹
});
</script>
</body>
</html>

在動態給下拉框賦值之后，卻沒有重新渲染下拉框。可以看到下拉框是出不來的。此時我們需要使用form.render()。來初始化。

只需要在動態賦值之后加上下面的代碼：

$("#btnInitCombox").click(function () {
alert(1111);
$('#aihao').append(new Option("A", 1));
$('#aihao').append(new Option("B", 2));
$('#aihao').append(new Option("C", 3));
form.render('select', 'aihao')
});

*** form.render('select', 'aihao')中select表示的是要重新渲染的表單類型~下拉框/單選框等。。后面的aihao指的是你的filter也就是過濾器,這里指的是僅僅渲染lay-filter='aihao'的容器下面的select下拉框。當然你可以不這么寫。有更省事得寫法直接form.render();ok,所有的表單都會被初始化。下面來測試。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../layui/css/layui.css" rel="stylesheet" />
<script src="../Scripts/jquery-3.3.1.js"></script>
<script src="../layui/layui.js"></script>
</head>
<body>
<div class="layui-form" lay-filter="aihao">
<!-- 提示：如果你不想用form，你可以換成div等任何一個普通元素 -->
<div class="layui-row">
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">下拉選擇框</label>
<div class="layui-input-block">
<select name="interest" id="aihao"></select>
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">按鈕</label>
<div class="layui-input-block">
<button class="layui-btn" id="btnInitCombox">立即提交</button>
</div>
</div>
</div>
</div>
</div>
<div class="layui-form">
<!-- 提示：如果你不想用form，你可以換成div等任何一個普通元素 -->
<div class="layui-row">
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">下拉選擇框</label>
<div class="layui-input-block">
<select name="interest" id="aihao1"></select>
</div>
</div>
</div>
</div>
</div>
<script>
layui.use('form', function () {
var form = layui.form;
$(function () {
$("#btnInitCombox").click(function () {
$('#aihao').append(new Option("A", 1));
$('#aihao').append(new Option("B", 2));
$('#aihao').append(new Option("C", 3));
$('#aihao1').append(new Option("A", 1));
$('#aihao1').append(new Option("B", 2));
$('#aihao1').append(new Option("C", 3));
form.render('select', 'aihao');
//form.render();
});

});
//各種基於事件的操作，下面會有進一步介紹
});
</script>
</body>
</html>

測試結果與預想完全一致。

***form.render(type, filter);方法具體使用：

參數（type）值 描述
select 刷新select選擇框渲染
checkbox 刷新checkbox復選框（含開關）渲染
radio 刷新radio單選框框渲染

eg:

  1. form.render(); //更新全部
  2. form.render('select'); //刷新select選擇框渲染

 

第一個參數：type，為表單的 type 類型，可選。默認對全部類型的表單進行一次更新。可局部刷新的 type 如下表：

第二個參數：filter，為 class="layui-form" 所在元素的 lay-filter="" 的值。你可以借助該參數，對表單完成局部更新。

 

 

接下來我們試一試表單的驗證。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../layui/css/layui.css" rel="stylesheet" />
<script src="../Scripts/jquery-3.3.1.js"></script>
<script src="../layui/layui.js"></script>
</head>
<body>
<div class="layui-form" lay-filter="aihao">
<!-- 提示：如果你不想用form，你可以換成div等任何一個普通元素 -->
<div class="layui-row">
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">必填</label>
<div class="layui-input-block">
<input type="text" name="" lay-verify="required" placeholder="請輸入" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">手機號</label>
<div class="layui-input-block">
<input type="text" name="" lay-verify="phone" placeholder="請輸入" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">按鈕</label>
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
</div>
</div>
</div>
</div>
</div>
<script>
layui.use('form', function () {
var form = layui.form;
$(function () {

});

});
</script>
</body>
</html>

測試的非空驗證和手機號碼驗證都已經ok。但是layui有個問題就是比如你設定了手機驗證，那么假如你這個手機號文本框傳入空值，結果會被驗證為手機號不正確。但是真正使用的時候，我們通常是假如用戶填了則驗證，沒填則不去驗證。所以這里要處理一下。代碼如下：其實就是用form.verify定義新的驗證。代碼測試符合要求。

eg:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../layui/css/layui.css" rel="stylesheet" />
<script src="../Scripts/jquery-3.3.1.js"></script>
<script src="../layui/layui.js"></script>
</head>
<body>
<div class="layui-form" lay-filter="aihao">
<!-- 提示：如果你不想用form，你可以換成div等任何一個普通元素 -->
<div class="layui-row">
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">必填</label>
<div class="layui-input-block">
<input type="text" name="" lay-verify="required" placeholder="請輸入" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">手機號</label>
<div class="layui-input-block">
<input type="text" name="" lay-verify="phoneCanNull" placeholder="請輸入" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">按鈕</label>
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
</div>
</div>
</div>
</div>
</div>
<script>
layui.use('form', function () {
var form = layui.form;
$(function () {
form.verify({
phoneCanNull: function (value, item) { //value：表單的值、item：表單的DOM對象
if (value != "") {
if (value!="12345678911") {
return '電話應該為12345678911\'_\'';
}
}

}
});
});

});
</script>
</body>
</html>

***接下來講一下事件監聽 其實有了前面的學習 這里很好懂了。語法：form.on('event(過濾器值)', callback);  下面是event支持的選項。

event 描述
select 監聽select下拉選擇事件
checkbox 監聽checkbox復選框勾選事件
switch 監聽checkbox復選框開關事件
radio 監聽radio單選框事件
submit 監聽表單提交事件

例如說你要監聽下拉框的選擇事件。只需要 ：

form.on('select(lay-filter)', function (data) {
alert(data.value)
});

 

eg:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../layui/css/layui.css" rel="stylesheet" />
<script src="../Scripts/jquery-3.3.1.js"></script>
<script src="../layui/layui.js"></script>
</head>
<body>
<div class="layui-form" lay-filter="aihao">
<!-- 提示：如果你不想用form，你可以換成div等任何一個普通元素 -->
<div class="layui-row">
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">必填</label>
<div class="layui-input-block">
<input type="text" name="" lay-verify="required" placeholder="請輸入" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">手機號</label>
<div class="layui-input-block">
<input type="text" name="" lay-verify="phoneCanNull" placeholder="請輸入" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">按鈕</label>
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">必填</label>
<div class="layui-input-block">
<select name="interest" lay-filter="test">
<option value="0">寫作</option>
<option value="1">閱讀</option>
</select>
</div>
</div>
</div>
</div>
</div>
<script>
layui.use('form', function () {
var form = layui.form;
$(function () {
form.verify({
phoneCanNull: function (value, item) { //value：表單的值、item：表單的DOM對象
if (value != "") {
if (value!="12345678911") {
return '電話應該為12345678911\'_\'';
}
}

}
});

form.on('select(test)', function (data) {
alert(data.value)
});
});

});
</script>
</body>
</html>

其他的checkbox等監聽同上。重要的東西基本就這么多。表單至此結束。

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 layui中form表單 layui渲染form表單 layui form表單提交 layui之form表單 layui之獲取form表單的radio Layui：前后端分離之Form表單 關於layui框架的form表單布局 layui的form表單重新渲染或刷新。 layui---form表單模塊 layui動態修改表單form內容
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM