form表單提交，jQuery對輸入內容進行驗證

        以前有一個需求是同一個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的驗證代碼，有什麼方法可以作到所謂的"自動驗證"麼?