form表ge实例 html_在layUI框架中通过JavaScript保存form表单信息

最新推荐文章于 2022-03-24 17:01:58 发布

ZS Chen

最新推荐文章于 2022-03-24 17:01:58 发布

阅读量397

点赞数

文章标签： form表ge实例 html

本文链接：https://blog.csdn.net/weixin_32176655/article/details/112183353

版权

首先，在html中引入这两个基本的js脚本

注意一定要引入form.js官方文档是这么写的

如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能

<script src="../layui/layui.js"></script>
<script src="../layui/lay/modules/form.js"></script>

参考Layui官方文档写几个基本的form组件

<form class="layui-form" action="">
 <div class="layui-form-item">
 <!-- 添加了内填充 字体样式-->
 <label class="layui-form-label">输入框</label>
 <!-- 浮动 -->
 <div class="a layui-input-block">
 <!-- 点击选中 边框阴影 -->
 <!-- 可在内部设置宽（输入框长度）或者跟随容器宽度变化 -->
 <input type="text" name="title" id="input" required lay-verify="required"
 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" required lay-verify="required"
 placeholder="请输入密码" autocomplete="off" class="layui-input" id="password">
 </div>
 </div>
 <div class="layui-form-item">
 <label class="layui-form-label">选择框</label>
 <div class="a layui-input-block">
 <select name="city" lay-verify="required" id="city">
 <option value=""></option>
 <option value="0">北京</option>
 <option value="1">上海</option>
 <option value="2">广州</option>
 <option value="3">深圳</option>
 <option value="4">湖南</option>
 </select>
 </div>
 </div>
 <div class="layui-form-item layui-form-text">
 <label class="layui-form-label">文本域</label>
 <div class="b layui-input-block">
 <textarea name="desc" placeholder="请输入内容" class="layui-textarea" id="testContent"></textarea>
 </div>
 </div>
 <div class="layui-form-item">
 <div class="layui-input-block">
 <button class="layui-btn" lay-submit lay-filter="formDemo" onclick=save()>保存</button>
 <button type="reset" class="layui-btn layui-btn-primary" id="reset">重置</button>
 </div>
 </div>
 </form>

出来的样式是这样的（原本的输入框和选择框长度是占满屏幕的，个人稍微调了一下）

组件功能都能正常使用，而且在各信息框组件中加入了lay-verify验证

如：

lay-verify="required"<!-- 必选项 -->

基本上前端样式没问题了，现在可以写js了

因为会用到jquery，所以先将jquery导入，然后将自己写的test脚本放在body后面，不然会引起找不到节点参数问题

<script src="../layui/lay/modules/jquery.min.js"></script>
<body>
...
</body>
<script src="./test1.js"></script>

分析一下页面需求：点击保存按钮，自动存储form表单中已经填入和选好的值，下次再刷新或者进入该页面时，自动填充上次保存的值。

存值方法这里选择localStorage

localstorage使用方法 - bonly-ge - 博客园www.cnblogs.com

首先为保存按钮赋一个onclick=save()点击事件然后在test.js中写save()函数

var save=()=>{
    //输入框保存
    textInput=document.getElementById('input').value
    localStorage.setItem("textInput",textInput)
    //密码框
    passWord=document.getElementById('password').value
    localStorage.setItem("passWord",passWord)
    //文本框
    textContent=document.getElementById('testContent').value
    localStorage.setItem("textContent",textContent)
}

这样就通过简单的节点访问获取了文本信息并且保存在loacalStorage中了

下次进入自动填充

document.getElementById('input').value=localStorage.getItem('textInput')
document.getElementById('password').value=localStorage.getItem('passWord')
document.getElementById('testContent').value=localStorage.getItem("textContent")

稍微麻烦一点的是选择框内容如何保存，我暂时只想到了这种方案——通过遍历select中option中的文本，做一个本地的数值比对，最后将比对好的下角标保留

const city=['北京','上海','广州','深圳','湖南']
var selectedNum=0
var selectNode = document.getElementById('city')
// jQuery语法没有.innerHTML语法 加上[0]使jQuery对象转换为原生对象
var selectedCity=$('#city option:selected')[0].innerHTML
 for(let i=0;i<city.length;i++){
 if(city[i]==selectedCity){
            selectedNum=i+1
 }
 }
localStorage.setItem("selecedNum",selectedNum)

最后填充

selectNode[localStorage.getItem('selecedNum')].setAttribute("selected",true)

重置按钮相关函数

//reset按钮无法触发onClick() onreset也无法调用函数 故使用jquery
$("#reset").click(()=>{
    localStorage.setItem("textInput",air)
    localStorage.setItem("passWord",air)
    localStorage.setItem("selecedNum",0)
 //点击重置时无法调用自定义设置seleced选中属性
 // 原因：form表单自带的reset动作为设置为默认值，也就是html中设置为seleced的选项
 // 而默认函数优先级大于自定义函数
 //selectNode[0].setAttribute("selected",true)
    localStorage.setItem("textContent",air)
})

遗留问题：点击重置按钮会使选择框自动选择上次所保存的选项

原因猜测：form表单自带的reset动作为设置为默认值，也就是html中设置为seleced的选项，而默认函数优先级大于自定义函数

最后贴上整体代码

html

<!DOCTYPE html>
<html>
<head>
	<title>layUI练习一</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	  <title>开始使用layui</title>
	  <link rel="stylesheet" href="../layui/css/layui.css">
	  <style>
		  .a{
			  width: 200px;
		  }
		  .b{
			  width: 500px;
		  }
		  .layui-form{
			  margin-top:20px;
		  }
	  </style>
</head>
<body>
	<script src="../layui/layui.js"></script>
	<script src="../layui/lay/modules/form.js"></script>
	<script src="../layui/lay/modules/jquery.min.js"></script>
	<form class="layui-form" action="">
		<div class="layui-form-item">
			<!-- 添加了内填充 字体样式-->
			<label class="layui-form-label">输入框</label>
			<!-- 浮动 -->
			<div class="a layui-input-block">
			<!-- 点击选中 边框阴影 -->
			<!-- 可在内部设置宽（输入框长度）或者跟随容器宽度变化 -->
			<input type="text" name="title" id="input" required lay-verify="required"
				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" required lay-verify="required"
			 	placeholder="请输入密码" autocomplete="off" class="layui-input" id="password">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">选择框</label>
			<div class="a layui-input-block">
				<select name="city" lay-verify="required" id="city">
					<option value=""></option>
					<option value="0">北京</option>
					<option value="1">上海</option>
					<option value="2">广州</option>
					<option value="3">深圳</option>
					<option value="4">湖南</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">文本域</label>
			<div class="b layui-input-block">
				<textarea name="desc" placeholder="请输入内容" class="layui-textarea" id="testContent"></textarea>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="formDemo" onclick=save()>保存</button>
				<button type="reset" class="layui-btn layui-btn-primary" id="reset">重置</button>
			</div>
		</div>
	</form>
	<script src="./test1.js"></script>
</body>
</html>

test1.js

const city=['北京','上海','广州','深圳','湖南']

var textInput=""
var passWord=""
var selectedNum=0
var air=""
var textContent=""
var selectNode = document.getElementById('city')
var save=()=>{
	textInput=document.getElementById('input').value
	localStorage.setItem("textInput",textInput)
	passWord=document.getElementById('password').value
	localStorage.setItem("passWord",passWord)
	// jQuery语法没有.innerHTML语法 加上[0]使jQuery对象转换为原生对象
	var selectedCity=$('#city option:selected')[0].innerHTML
	for(let i=0;i<city.length;i++){
		if(city[i]==selectedCity){
			selectedNum=i+1
		}
	}
	localStorage.setItem("selecedNum",selectedNum)
	textContent=document.getElementById('testContent').value
	localStorage.setItem("textContent",textContent)
}
//reset按钮无法触发onClick() onreset也无法调用函数
$("#reset").click(()=>{
	localStorage.setItem("textInput",air)
	localStorage.setItem("passWord",air)
	localStorage.setItem("selecedNum",0)
	//点击重置时无法调用自定义设置seleced选中属性
	// 原因：form表单自带的reset动作为设置为默认值，也就是html中设置为seleced的选项
	// 而默认函数优先级大于自定义函数
	//selectNode[0].setAttribute("selected",true)
	localStorage.setItem("textContent",air)
})
document.getElementById('input').value=localStorage.getItem('textInput')
document.getElementById('password').value=localStorage.getItem('passWord')
selectNode[localStorage.getItem('selecedNum')].setAttribute("selected",true)
document.getElementById('testContent').value=localStorage.getItem("textContent")