jQuery 之表单序列化
HTML
前端页面最外层包裹一个 form 标签
代码如下（示例）：
<form>
您的 HTML 页面...如：
<div>
前端代码...
</div>
</form>
jQuery
代码如下（示例）：
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
/**
* 初始化函数
* form 表单序列化获取当前页面的所有值
*/
$.fn.serializeObject = function(){
var obj = new Object();
var jsonArray = $("form").serializeArray();
$.each(jsonArray, function() {
if (obj[this.name] !== undefined) {
if (!obj[this.name].push) {
obj[this.name] = [obj[this.name]];
}
obj[this.name].push(this.value || '');
} else {
obj[this.name] = this.value || '';
}
});
return obj;
}
// 此处调用 控制台输出结果
var json = $("form").serializeObject();
console.log(json);
var jsonStr = JSON.stringify(json);
console.log(jsonStr);
</script>
jQuery 表单序列化
代码如下（示例）：
#@layout()
#define css()
<link rel="stylesheet" href="/res/web/css/style.css"/>
<link rel="stylesheet" href="/res/web/css/templatemo-style.css"/>
<style type="text/css">
.diy {
color: #FF5722 !important;
font-size: 14px;
margin-left: 15px;
}
</style>
#end
#define main()
<form id="layuiadmin-setup" class="layui-form">
<div class="layui-fluid layui-form-pane">
<div class="layui-row layui-col-md12 top">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>传感器设备配置</legend>
</fieldset>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">北斗地址</label>
<div class="layui-input-inline">
<input name="ipGga" required lay-verify="required" value="#(ipGga??)" placeholder="请输入北斗定位通信地址" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">北斗端口</label>
<div class="layui-input-inline">
<input name="portGga" required lay-verify="required|number" value="#(portGga??)" placeholder="请输入北斗定位通信端口" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">CAN 地址</label>
<div class="layui-input-inline">
<input name="ipCanet" required lay-verify="required" value="#(ipCanet??)" placeholder="请输入CANET通信地址" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">CAN 端口</label>
<div class="layui-input-inline">
<input name="portCanet" required lay-verify="required" value="#(portCanet??)" placeholder="请输入CANET通信端口" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>视频监控配置</legend>
</fieldset>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">监控地址</label>
<div class="layui-input-inline">
<input name="ipVideo" required lay-verify="required" value="#(ipVideo??)" placeholder="请输入摄像头通信地址" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">监控用户</label>
<div class="layui-input-inline">
<input name="userVideo" required lay-verify="required" value="#(userVideo??)" placeholder="请输入摄像头用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">监控密码</label>
<div class="layui-input-inline">
<input name="pwdVideo" required lay-verify="required" value="#(pwdVideo??)" placeholder="请输入摄像头密码" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>基本信息配置</legend>
</fieldset>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">车辆编号</label>
<div class="layui-input-inline">
<input name="carNo" required lay-verify="required" value="#(carNo??)" placeholder="请输入车辆编号" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">设备编号</label>
<div class="layui-input-inline">
<input name="devNum" required lay-verify="required" value="#(devNum??)" placeholder="请输入设备编号" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label" style="padding: 9px 0">采集周期</label>
<div class="layui-input-inline">
<input name="time" required lay-verify="required|number" value="#(time??)" placeholder="请输入采集时间间隔（秒）" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">γ剂量值</label>
<div class="layui-input-inline">
<input name="valueMAX" required lay-verify="required" value="#(valueMAX??)" placeholder="请输入γ剂量值安全阈值" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>数据封装频率(分钟)</legend>
</fieldset>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">车辆装备</label>
<div class="layui-input-inline">
<input type="number" min=1 max=59 name="vehicleEquipInfoCron4j" required lay-verify="required|number" onkeyup="this.value= this.value.match(/^[1-9]\d*$/)" οnkeypress="showKeyPress()" onpaste="return false;" value="#(vehicleEquipInfoCron4j??)" placeholder="请输入间隔(分~正整数)" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">人员信息</label>
<div class="layui-input-inline">
<input type="number" min=1 max=59 name="personalInfoCron4j" required lay-verify="required|number" onkeyup="this.value= this.value.match(/^[1-9]\d*$/)" οnkeypress="showKeyPress()" onpaste="return false;" value="#(personalInfoCron4j??)" placeholder="请输入间隔(分~正整数)" autocomplete="off" class="layui-input">
</div>
</div>
#--
<div class="layui-inline">
<label class="layui-form-label">北斗定位</label>
<div class="layui-input-inline">
<input type="number" min=1 max=59 name="ggaCron4j" required lay-verify="required|number" onkeyup="this.value= this.value.match(/^[1-9]\d*$/)" οnkeypress="showKeyPress()" onpaste="return false;" value="#(ggaCron4j??)" placeholder="请输入间隔(分~正整数)" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">车辆状态</label>
<div class="layui-input-inline">
<input type="number" min=1 max=59 name="statusCron4j" required lay-verify="required|number" onkeyup="this.value= this.value.match(/^[1-9]\d*$/)" οnkeypress="showKeyPress()" onpaste="return false;" value="#(statusCron4j??)" placeholder="请输入间隔(分~正整数)" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">车辆污染</label>
<div class="layui-input-inline">
<input type="number" min=1 max=59 name="polluteCron4j" required lay-verify="required|number" onkeyup="this.value= this.value.match(/^[1-9]\d*$/)" οnkeypress="showKeyPress()" onpaste="return false;" value="#(polluteCron4j??)" placeholder="请输入间隔(分~正整数)" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">个人剂量</label>
<div class="layui-input-inline">
<input type="number" min=1 max=59 name="personalCron4j" required lay-verify="required|number" onkeyup="this.value= this.value.match(/^[1-9]\d*$/)" οnkeypress="showKeyPress()" onpaste="return false;" value="#(personalCron4j??)" placeholder="请输入间隔(分~正整数)" autocomplete="off" class="layui-input">
</div>
</div>
--#
<div class="layui-inline">
<label class="layui-form-label">存储磁盘</label>
<div class="layui-input-inline">
<input name="disk" required lay-verify="required" value="#(disk)" placeholder="请输入数据封装存储目录" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux diy"><i class="layui-icon"></i> 请勿输入以点开头的磁盘路径~请规范配置！</div>
</div>
</div>
<div class="layui-form-item layui-hide">
<input id="layuiadmin-setup-btn" type="button" lay-submit lay-filter="layuiadmin-setup-btn" value="保存配置">
</div>
</div>
</div>
</form>
#end
#define js()
<script>
layui.use(['jquery', 'form'],function(){
var $ = layui.$, form = layui.form;
// 数据封装频率(分钟)正则表达式【大于0的正整数】
function showKeyPress(evt) {
evt = (evt) ? evt : window.event
return checkSpecificKey(evt.keyCode);
}
function checkSpecificKey(keyCode) {
var specialKey = "[`~!#$^&*()=|{}':;',\\[\\].<>/?~！#￥……&*（）——|{}【】‘；：”“'。，、？]‘’";//Specific Key list
var realkey = String.fromCharCode(keyCode);
var flg = false;
flg = (specialKey.indexOf(realkey) >= 0);
if (flg) {
return false;
}
return true;
}
document.onkeypress = showKeyPress;
/**
* 初始化函数
* form 表单序列化获取当前页面的所有值
*/
$.fn.serializeObject = function(){
var obj = new Object();
var jsonArray = $("form").serializeArray();
$.each(jsonArray, function() {
if (obj[this.name] !== undefined) {
if (!obj[this.name].push) {
obj[this.name] = [obj[this.name]];
}
obj[this.name].push(this.value || '');
} else {
obj[this.name] = this.value || '';
}
});
return obj;
}
// 此处调用 控制台输出结果
var json = $("form").serializeObject();
console.log(json);
var jsonStr = JSON.stringify(json);
console.log(jsonStr);
});
</script>
#end
