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">&#xe60c;</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