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