之前有一個需求是同一個form表單可以提交多組某個字段的數據，至於為什么說‘組’呢，因為那個字段的數據又分成幾個字段去存儲，之前我想着用form套form去做，后來發現這個思路不通，於是乎，做了多組數據，通過DOM元素name屬性的結尾后綴進行區分對應是那一組的數據。繼續，為了符合用戶使用習慣，不至於提交代碼后台驗證不通過打回去，此時用戶輸入的內容就不存在了，因此，我需要加一層前台js驗證，下面是代碼，方便以后復用。其中需要注意的是，前台驗證並不能代替后端服務器驗證，因為前台代碼可以通過審查元素刪除、改寫，因此存在繞過安全驗證的風險。
大家可能會懷疑我為啥說啰嗦半天說這么多有的沒的，一方面是給小白看，方便他們看懂，另一方面，是為了湊夠150個字，不然不允許發表。好了，大家繼續看代碼吧！
html代碼：
<form action="" enctype="multipart/form-data" method="post" >
<div class="right">
<dl class="binfo">
<dt>企業信息</dt>
<dd><label>企業名稱</label><input type="text" name="" value="{$NicName}" ></dd>
<dd><label>企業名稱(英文)</label><input type="text" name="en_enterprise" value="Chinabidders (Dalian) Technology Co., Ltd." ></dd>
<dd><label>營業執照</label><input type="file" name="license"></dd>
<dd><select name="province" id="province" onchange="loadRegion('province',2,'city','{:U('Login/getRegion')}');">
<option value="0" selected>省份/直轄市</option><volist name="province" id="vo">
<option value="{$vo.id}" >{$vo.name}</option></volist>
</select></dd>
<dd><select name="city" id="city" onchange="loadRegion('city',3,'town','{:U('Login/getRegion')}');">
<option value="0">市/縣</option>
</select></dd>
<dd><select name="town" id="town">
<option value="0">鎮/區</option>
</select></dd>
<dd><label>詳細地址</label>
<input type="text" name="address" value="北京市海淀區紫竹院路" ></dd>
<dd><label>企業電話</label><input type="text" name="enterprise_phone" value="4006858688" ></dd>
<dd><label>聯系人</label><input type="text" name="contacts" value="王某某" ></dd>
<dd><label>聯系人職位</label><input type="text" name="position"value="總經理" ></dd>
<dd><label>聯系人手機號碼</label><input type="text" name="phone" value="1899999999" ></dd>
<dd><label>企業官網</label><input type="text" name="official" value="www.chinabidders.com" ></dd>
<dd><label>感興趣行業</label><input type="text" name="interest" value="建築、能源、教育" ></dd>
<dd><label>主營市場</label><input type="text" name="market" value="巴基斯坦" ></dd>
<dd><label>主營業務</label><input type="text" name="business"value="物流、金融、商務、采招" ></dd>
<dd><label>主要業績</label>
<div class="main_business">
<input class="small_input" id="startYear1" name="startYear1" placeholder="起始年份"><input id="endYear1" name="endYear1" class="small_input" placeholder="結束年份">
<select id="countryid1" name="countryid1" style="width: 4vw;height: 2vw;border: 1px solid #ccc;">
<option value="0" selected>所在國家</option><volist name="country" id="vo">
<option value="{$vo.id}" >{$vo.name}</option></volist>
</select>
<input id="proAmount1" name="proAmount1" class="small_input" placeholder="項目金額(單位:萬元)"><input id="proName1" name="proName1" class="small_input" placeholder="項目名稱">
</div><a style="font-weight: bold;font-size: 2rem;" class="add_click">+</a>
<div class="main_business add_main_business" style="display: none;margin-left: 25%;">
<input class="small_input" name="startYear2" placeholder="起始年份"><input name="endYear2" class="small_input" placeholder="結束年份">
<!--<input class="small_input" name="countryid2" placeholder="國家">-->
<select name="countryid2" style="width: 4vw;height: 2vw;border: 1px solid #ccc;">
<option value="0" selected>所在國家</option><volist name="country" id="vo">
<option value="{$vo.id}" >{$vo.name}</option></volist>
</select>
<input name="proAmount2" class="small_input" placeholder="項目金額(單位:萬元)"><input name="proName2" class="small_input" placeholder="項目名稱">
</div>
</dd>
<h2><input id="btnSendMsg" type="submit" value="修改企業信息"></h2>
</dl>
</form>
jQuery代碼(驗證的都是主要業績里的元素)：
<script>
$(function(){ $("#btnSendMsg").bind('click', sendsms); $(".add_click").click(function(){ $(".add_main_business").show(); }); }); function sendsms() { var startYear1 = $("#startYear1").val(); var endYear1 = $("#endYear1").val(); var regPartton = /^[\d]{4}$/; var countryid1 = $("#countryid1").val(); var proAmount1 = $("#proAmount1").val(); var regParttonProAmount = /^[\d]+(\.?[\d]*)$/; var proName1 = $("#proName1").val(); if(!startYear1 || startYear1==null || !endYear1 || endYear1==null){ alert('起止年份不能為空'); return false; }else if(!regPartton.test(startYear1)||!regPartton.test(endYear1)){ alert('起止年份格式不正確，必須為4位純數字'); return false; }else if(parseInt(startYear1) > parseInt(endYear1)){ alert('您的結束年份比開始年份還早，請檢查是否寫反了'); return false; } if(countryid1 == 0){ alert('請選擇項目所在國家'); return false; } if(!proAmount1 || proAmount1 == null){ alert('項目金額不能為空'); return false; }else if(parseFloat(proAmount1) >= 999999.99){ alert('項目金額不能超過999999.99萬元'); return false; }else if(!regParttonProAmount.test(proAmount1)){ alert('項目金額純數字，可以有小數點，小數點后最多兩位'); return false; }else if(/\.[\d]{3}/.test(proAmount1)){ alert('最多小數點后兩位'); return false; } } </script>
注：此代碼可以添加1~2組主要業績，以后可以無限制添加了再更新一版，望大家斧正！給我思路也好^_^
另外我還有一個問題想想向大家請教，關於下面的jQuery驗證的問題，細心的同學可以發現真正有用的的是name屬性后綴為1的，后綴為2的基本是完全復用1的驗證代碼，有什么方法能夠做到所謂的"自動驗證"么?