master

分支 (2)

管理

管理

master

20210904

layui-plugin
/
password.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>密码组件</title>
		<link rel="stylesheet" href="layui/css/layui.css" />
		<style type="text/css">
		.tooltip {
		    position: absolute;
		    display: inline-block;
		    border-bottom: 1px dotted #c2c2c2;
			left:50%;
		}

		.tooltip ul{
			padding: 10px 0px 10px 0;
		}

		.tooltip .tooltiptext {
			visibility: visible;
			width: 160px;
			height: 35px;
			line-height: 15px;
			top: -50px;
			border:1px solid #c2c2c2;
			background-color: white;
			color: #fff;
			text-align: center;
			border-radius: 6px;
			padding: 5px 0;
			position: absolute;
			z-index: 1;
			bottom: 150%;
			left: 50%;
			margin-left: -80px;
		}

		.tooltip .tooltiptext::after {
		    content: "";
		    position: absolute;
		    top: 100%;
		    left: 50%;
		    margin-left: -5px;
		    border-width: 5px;
		    border-style: solid;
		    border-color: #c2c2c2 transparent transparent transparent;
		}

		.tooltip:hover .tooltiptext {
		    visibility: visible;
		}
		</style>
	</head>
	<body>
		<form class="layui-form layui-form-pane" action="" style="width: 300px;height:400px;padding: 10px;border:1px solid #F0F0F0;margin: 40px auto;" lay-filter="example">
			  <div class="layui-form-item" id="next">
			    <label class="layui-form-label">验证必填项</label>
			    <div class="layui-input-block">
			      <input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input">
			    </div>
			  </div>
			  <div class="layui-form-item">
			      <button class="layui-btn" lay-submit="" lay-filter="demo2">提交</button>
			  </div>
		</form>
		<form class="layui-form layui-form-pane" action="" style="width: 300px;height:400px;padding: 10px;border:1px solid #F0F0F0;margin: 40px auto;" lay-filter="example0">
			  <div class="layui-form-item" id="next0">
			    <label class="layui-form-label">验证必填项</label>
			    <div class="layui-input-block">
			      <input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input">
			    </div>
			  </div>
			  <div class="layui-form-item">
			      <button class="layui-btn" lay-submit="" lay-filter="demo">提交</button>
			  </div>
		</form>
	</body>
	<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		layui.config({
			base: 'plugin/'
		}).use(['jquery', 'layer', 'password','form','upload'], function() {
			var $ = layui.jquery,
				password = layui.password,
				form = layui.form;

			 password.render({
				 event:'example',
				 next:'next'
			 });

			 password.render({
				 event:'example0',
				 next:'next0'
			 });

			 //监听提交
			 form.on('submit(demo2)', function(data) {

				 return false;
			 });

			 //监听提交
			 form.on('submit(demo)', function(data) {

			 	return false;
			 });
		});
	</script>
</html>