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属性的值