layui框架（layui簡介和form表單的樣式添加）

一、layui簡介
1、 layui（諧音：類UI) 是一款採用自身模塊規範編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細節都經過精心雕琢，非常適合界面的快速開發。layui 首個版本發佈於 2016 年金秋，她區別於那些基於 MVVM 底層的 UI 框架，卻並非逆道而行，而是信奉返璞歸真之道。準確地說，她更多是爲服務端程序員量身定做，你無需涉足各種前端工具的複雜配置，只需面對瀏覽器本身，讓一切你所需要的元素與交互，從這裏信手拈來。

2、目錄結構

3、文件的引用

二、如何簡單的使用layui框架
layui.use()方法：加載所需模塊；
當你使用表單時，layui 會對 select、checkbox、radio 等原始元素隱藏，從而進行美化修飾處理。但這需要依賴於 form 組件，所以你必須加載 form，並且執行一個實例。

<script>
//一般直接寫在一個js文件中
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form; //只有執行了這一步，部分表單元素纔會自動修飾成功
  
  layer.msg('Hello World');
});//彈框
</script> 

三、form表單每個標籤的常用class屬性
1、form標籤
class：layui-form

<form action="" method="post" class="layui-form"></form>

2、輸入框代碼書寫格式
外層div的class：layui-form-item；
lable：layui-form-label；
內層div的class：layui-input-inline；
輸入框的class：layui-input；

			<div class="layui-form-item">
				<label class="layui-form-label">用戶名</label>
				<div class="layui-input-inline">
					<input type="text" name="useraName" required lay-verify="required" placeholder="請輸入用戶名" class="layui-input"/>
				</div>
			</div>

3、單選框
和輸入框不同的地方就是單選框的class屬性值不同
單選框的class：layui-radio-disbaled

			<div class="layui-form-item">
				<label class="layui-form-label">性別</label>
				<div class="layui-input-inline">
					<input type="radio" name="sex" class="layui-radio-disbaled" value="男" title="男" checked="checked" />
					<input type="radio" name="sex" class="layui-radio-disbaled" value="女" title="女" />
				</div>
			</div>

4、複選框
lay-skin=“primary”：原始複選框

			<div class="layui-form-item">
				<label class="layui-form-label">愛好</label>
				<div class="layui-input-block">
					<input type="checkbox" name="exercise" value="運動" title="運動" checked="checked" lay-skin="primary">
					<input type="checkbox" name="music" value="聽音樂" title="聽音樂">
					<input type="checkbox" name="book" value="看書" title="看書">
					<input type="checkbox" name="movie" value="看電影" title="看電影">
					<input type="checkbox" name="movie" value="旅遊" title="旅遊" disabled="disabled">
				</div>
			</div>

5、下拉框

			<div class="layui-form-item">
				<label class="layui-form-label">班級</label>
				<div class="layui-input-inline">
					<select name="clazz" lay-verify="required">
						<option value=""></option>
						<option value="1班">1班</option>
						<option value="2班">2班</option>
						<option value="3班">3班</option>
						<option value="4班">4班</option>
						<option value="5班" disabled="disabled">5班</option>
					</select>
				</div>
			</div>

6、文本域

			<div class="layui-form-item">
				<label class="layui-form-label">留言</label>
				<div class="layui-input-inline">
					<textarea name="leave" placeholder="請輸入你的留言" class="layui-textarea" lay-verify="required"></textarea>
				</div>
			</div>

7、開關按鈕

			<div class="layui-form-item">
				<label class="layui-form-label">開關</label>
				<div class="layui-input-inline">
					<input type="checkbox" checked="checked" name="close" lay-skin="switch" lay-text="ON|OFF" />
				</div>
			</div>

8、提交submit和重置reset
class=“layui-btn layui-btn-normal”
按鈕的樣式class較多，有如下幾個

<button type="button" class="layui-btn layui-btn-primary">原始按鈕</button>
    <button type="button" class="layui-btn">默認按鈕</button>
    <button type="button" class="layui-btn layui-btn-normal">百搭按鈕</button>
    <button type="button" class="layui-btn layui-btn-warm">暖色按鈕</button>
    <button type="button" class="layui-btn layui-btn-danger">警告按鈕</button>
    <button type="button" class="layui-btn layui-btn-disabled">禁用按鈕</button>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-danger">重置</button>
				</div>
			</div>

9、表單的賦值

10、自定義驗證規則
這裏的title是輸入框的lay-verify屬性的值