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" οnchange="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"  οnchange="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的验证代码，有什么方法能够做到所谓的"自动验证"么?