031-表单元素

最新推荐文章于 2023-08-21 11:40:33 发布

自由与束缚JavaJavaScript

最新推荐文章于 2023-08-21 11:40:33 发布

阅读量705

点赞数

分类专栏： layui学习

本文链接：https://blog.csdn.net/aihiao/article/details/113081065

版权

layui学习专栏收录该内容

32 篇文章 1 订阅

订阅专栏

1. 在一个容器中设定class="layui-form"来标识一个表单元素块, 通过规范好的html结构及CSS类, 来组装成各式各样的表单元素, 并通过内置的form模块来完成各种交互。

2. 表单元素依赖form模块。(请注意: 如果不加载form模块, select、checkbox、radio等将无法显示, 并且无法使用form相关功能)。

3. 表单容器

3.1. form元素添加class="layui-form"属性, 作为layui的表单容器:

<form class="layui-form" action="" method="post">
表单元素...
</form>

4. 基本的行区块结构

<div class="layui-form-item">
	<label class="layui-form-label">标签区域</label>
	<div class="layui-input-block">
		原始表单元素区域
	</div>
</div>

<div class="layui-form-item">
	<label class="layui-form-label">标签区域</label>
	<div class="layui-input-inline">
		原始表单元素区域
	</div>
	<div class="layui-form-mid layui-word-aux">辅助文字</div>
</div>

5. 预设表单元素属性

5.1. 预设表单元素属性可以使得一些交互操作交由form模块内部、或者你来借助form提供的JS接口精确控制。目前可支持的属性如下表所示:

6. 输入框

6.1. class="layui-input": layui.css提供的通用CSS类。

6.2. lay-verify: 注册form模块需要验证的类型。

<input type="text" name="title" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" />
<input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
<input type="text" name="mobile" lay-verify="phone" placeholder="请输入手机号" class="layui-input">

7. 下拉选择框

7.1. 通过设定属性lay-search来开启搜索匹配功能:

<select name="city" lay-search>
	<option value="">请选择一个城市</option>
	<option value="0">北京</option>
	<option value="1">郑州</option>
	<option value="2">洛阳</option>
	<option value="3">南阳</option>
	<option value="4">开封</option>
</select>

8. 复选框

8.1. 属性title可自定义文本。

8.2. 属性lay-skin可设置复选框的风格。一般不写或者lay-skin="primary"。

<input type="checkbox" name="write" title="写作">
<input type="checkbox" name="read" title="阅读" checked>
<input type="checkbox" name="dai" lay-skin="primary" title="发呆">

9. 开关

9.1. 属性lay-text可自定义开关两种状态的文本。

9.2. 属性lay-skin可设置复选框的风格。通常是lay-skin="switch"。

<input type="checkbox" name="switch" lay-skin="switch" lay-text="ON|OFF">

10. 单选框

10.1. 属性title可自定义文本。

<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女" checked>

11. 文本域

11.1. class="layui-textarea", layui.css提供的通用CSS类。

<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>

12. 组装行内表单

12.1. class="layui-inline": 定义外层行内。

12.2. class="layui-input-inline": 定义内层行内。(class="layui-input-block": 定义内层块。)

<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>

13. 忽略美化渲染

13.1. 你可以对表单元素增加属性lay-ignore设置后, 将不会对该标签进行美化渲染, 即保留系统风格, 比如:

<select lay-ignore>
	<option>…</option>
</select>

14. 表单方框风格

14.1. 通过追加layui-form-pane的class,来设定表单的方框风格。

14.2. 值得注意的是复选框/开关/单选框, 这些组合在该风格下需要额外添加pane属性(否则会看起来比较别扭)。

<form class="layui-form layui-form-pane" action="">
  	<div class="layui-form-item" pane>
    	<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>
</form>

15. 更新渲染

15.1. 有些时候, 你的有些表单元素可能是动态插入的。这时form模块的自动化渲染是会对其失效的。但没有关系, 你只需要执行form.render(type, filter);方法即可。

15.2. 第一个参数: type为表单的type类型, 可选。默认对全部类型的表单进行一次更新。可局部刷新的type如下表:

form.render(); // 更新全部
form.render('select'); // 刷新select选择框渲染

15.3. 第二个参数: filter为class="layui-form"所在元素的lay-filter=""的值。你可以借助该参数, 对表单完成局部更新。

[HTML]
<div class="layui-form" lay-filter="test1">
	...
</div>
 
<div class="layui-form" lay-filter="test2">
	...
</div>
      
[JavaScript]
form.render(null, 'test1'); // 更新lay-filter="test1"所在容器内的全部表单状态
form.render('select', 'test2'); // 更新lay-filter="test2"所在容器内的全部select状态

16. 事件监听

16.1. 语法: form.on('event(过滤器值)', callback);

16.2. form模块在layui事件机制中注册了专属事件, 所以当你使用layui.onevent()自定义模块事件时, 请勿占用form名。form支持的事件如下:

16.3. 默认情况下, 事件所监听的是全部的form模块元素, 但如果你只想监听某一个元素, 使用事件过滤器即可。

17. 监听select选择

17.1. 下拉选择框被选中时触发, 回调函数返回一个object参数, 携带两个成员:

form.on('select', function(data){
  	console.log(data.elem); // 得到select原始DOM对象
  	console.log(data.value); // 得到被选中的值
  	console.log(data.othis); // 得到美化后的DOM对象
});

18. 监听checkbox复选

18.1. 复选框点击勾选时触发, 回调函数返回一个object参数, 携带两个成员:

form.on('checkbox(checkbox1)', function(data){
	console.log(data.elem); // 得到checkbox原始DOM对象
  	console.log(data.elem.checked); // 是否被选中, true或者false
  	console.log(data.value); // 复选框value值, 也可以通过data.elem.value得到
  	console.log(data.othis); // 得到美化后的DOM对象
});

19. 监听switch开关

19.1. 开关被点击时触发, 回调函数返回一个object参数, 携带两个成员:

form.on('switch', function(data){
  	console.log(data.elem); // 得到checkbox原始DOM对象
  	console.log(data.elem.checked); // 开关是否开启, true或者false
  	console.log(data.value); // 开关value值, 也可以通过data.elem.value得到
  	console.log(data.othis); // 得到美化后的DOM对象
});

20. 监听radio单选

20.1. radio单选框被点击时触发, 回调函数返回一个object参数, 携带两个成员:

form.on('radio', function(data){
  	console.log(data.elem); // 得到radio原始DOM对象
  	console.log(data.value); // 被点击的radio的value值
});

21. 监听submit提交

21.1. 按钮点击或者表单被执行提交时触发, 其中回调函数只有在验证全部通过后才会进入, 回调返回三个成员:

form.on('submit', function(data){
	console.log(data.elem) // 被执行事件的元素DOM对象, 一般为button对象
	console.log(data.form) // 被执行提交的form对象, 一般在存在form标签时才会返回
	console.log(data.field) // 当前容器的全部表单字段, 名值对形式: {name: value}
	return false; // 阻止表单跳转。如果需要表单跳转, 去掉这段即可。
});

22. 表单赋值/取值

22.1. 语法: form.val('filter', object);用于给指定表单集合的元素赋值和取值。如果object参数存在, 则为赋值; 如果object参数不存在, 则为取值。第二个参数中的键值是表单元素对应的name和value。

// 给表单赋值
form.val("form1", { // class="layui-form"所在元素属性lay-filter="form1"对应的值
	"city": 2
  	,"desc": "我是一个有理想的人。"
  	,"mobile": 13552464800
  	,"password": 123456
  	,"read": "阅读"
  	,"sex": "女"
  	,"title": "注册新用户"
  	,"switch": "register"
});
 
// 获取表单区域所有值
var form1Values = form.val("form1");

23. 表单验证

23.1. 我们对表单的验证进行了非常巧妙的支持, 大多数时候你只需要在表单元素上加上lay-verify=""属性值即可。

<input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
<input type="text" name="mobile" lay-verify="phone" placeholder="请输入手机号" class="layui-input">

23.2. 除了内置的校验规则外, 你还可以自定义验证规则, 通常对于比较复杂的校验, 这是非常有必要的。当你自定义了验证规则后, 你只需要把key赋值给输入框的lay-verify属性即可。

<input type="text" name="title" lay-verify="required|title" placeholder="请输入标题" autocomplete="off" class="layui-input" />

// 自定义验证规则
form.verify({
    title: function(value, item){
	    if(!new RegExp("^[a-zA-Z0-9_]+$").test(value)){
				return '标题内容是大小字母、数字、下划线';
		}

    	if(value.length < 5){
        	return '标题也太短了吧';
      	}
      	if(value.length > 16){
        	return '标题也太长了吧';
      	}
    }
});

23.2. form.verify()方法回调函数中, value: 表单的值; item: 表单的DOM对象。

24. 例子

24.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>表单元素 - layui</title>
		
		<link rel="stylesheet" href="layui/css/layui.css">
		<script type="text/javascript" type="text/javascript" src="layui/layui.js"></script>
	</head>

	<body>
		<form class="layui-form layui-form-pane" action="" method="post" lay-filter="form1">
  			<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" 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" placeholder="请输入密码" autocomplete="off" class="layui-input">
    			</div>
    			<div class="layui-form-mid layui-word-aux">6-16位字母、数字、下划线组合</div>
  			</div>

  			<div class="layui-form-item">
				<label class="layui-form-label">手机号</label>
				<div class="layui-input-inline">
					<input type="text" name="mobile" lay-verify="phone" placeholder="请输入手机号" class="layui-input">
				</div>
  			</div>

  			<div class="layui-form-item">
    			<label class="layui-form-label">选择框</label>
    			<div class="layui-input-block">
			      	<select name="city" lay-search>
				        <option value="">请选择一个城市</option>
				        <option value="0">北京</option>
				        <option value="1">郑州</option>
				        <option value="2" selected="select">洛阳</option>
				        <option value="3">南阳</option>
				        <option value="4">开封</option>
      				</select>
    			</div>
  			</div>

  			<div class="layui-form-item" pane lay-filter="test1111">
    			<label class="layui-form-label">复选框</label>
			    <div class="layui-input-block">
				    <input type="checkbox" name="write" title="写作" value="写作" lay-filter="checkbox1">
				    <input type="checkbox" name="read" title="阅读" value="阅读" checked>
				    <input type="checkbox" name="dai" lay-skin="primary" title="发呆" value="发呆">
			    </div>
  			</div>

		  	<div class="layui-form-item" pane>
			    <label class="layui-form-label">开关</label>
			    <div class="layui-input-block">
			    	<input type="checkbox" name="switch" lay-skin="switch" lay-text="ON|OFF" checked="checked" value="register">
			    </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="男" 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 type="text/javascript">
			layui.use(['form', 'laydate'], function(){
				var form = layui.form
				,laydate = layui.laydate;

			  	laydate.render({
			    	elem: '#date'
			    	,value: new Date()
  					,isInitValue: true
			  	});

			  	// 自定义验证规则
			  	form.verify({
				    title: function(value, item){
			    	    if(!new RegExp("^[a-zA-Z0-9_]+$").test(value)){
  							return '标题内容是大小字母、数字、下划线';
						}

				    	if(value.length < 5){
				        	return '标题也太短了吧';
				      	}
				      	if(value.length > 16){
				        	return '标题也太长了吧';
				      	}
				    }
			  	});

			  	form.on('select', function(data){
				  	console.log(data.elem); // 得到select原始DOM对象
				  	console.log(data.value); // 得到被选中的值
				  	console.log(data.othis); // 得到美化后的DOM对象
				});      

			  	form.on('checkbox(checkbox1)', function(data){
  					console.log(data.elem); // 得到checkbox原始DOM对象
				  	console.log(data.elem.checked); // 是否被选中, true或者false
				  	console.log(data.value); // 复选框value值, 也可以通过data.elem.value得到
				  	console.log(data.othis); // 得到美化后的DOM对象
				});        

			  	form.on('switch', function(data){
				  	console.log(data.elem); // 得到checkbox原始DOM对象
				  	console.log(data.elem.checked); // 开关是否开启, true或者false
				  	console.log(data.value); // 开关value值, 也可以通过data.elem.value得到
				  	console.log(data.othis); // 得到美化后的DOM对象
				});  

			  	form.on('radio', function(data){
				  	console.log(data.elem); // 得到radio原始DOM对象
				  	console.log(data.value); // 被点击的radio的value值
				});  

			  	form.on('submit', function(data){
			  		console.log(data.elem) // 被执行事件的元素DOM对象, 一般为button对象
  					console.log(data.form) // 被执行提交的form对象, 一般在存在form标签时才会返回
  					console.log(data.field) // 当前容器的全部表单字段, 名值对形式: {name: value}
  					// return false; // 阻止表单跳转。如果需要表单跳转, 去掉这段即可。
			  	});

			  	var form1Values = form.val("form1");
			  	console.log(form1Values);
			});
		</script>
	</body>
</html>

24.2. 效果图