Jsp页面多表单js验证（实践验证版）

后端使用jsp开发，前端不可避免的要做一些工作，在做页面提交，表单验证的时候单个获取页面元素验证非空及格式时，非常麻烦，影响效率。<h:text >标签不像正常标签元素可以自行添加属性，它的属性是有限制的；由于同一页面会有多个表格出现，所以没有使用form表单验证。为了实现快速验证多个表单，我自己写了一个方法校验，可作为参考。

思路：
<h:text >标签不像正常标签元素可以自行添加属性，它的属性是有限制的，选用title这个属性，给必填项添加title；
将id和它的表单名称对应起来；非必填项不添加，校验时非必填不校验；
拿到table里所有必填的循环，校验非空；
生成json提交；

jsp页面结构

<h3 class="h3_title">业务信息</h3>
	<table class="table_box **table_oneInfo**" cellspacing="0" id="grid_0">
			<tr>
				<th>姓名<span class="important">*</span></th>
				<td><h:text id="recruitedname" property="mainreq/recruitedname"  title="姓名"  /></td>
				<th>入职日期<span class="important">*</span></th>				
				<td><h:text id="outdate" property="mainreq/recruitedindate" title="入职日期" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" /></td>
				<th>性别<span class="important">*</span></th>
				<td><h:select id="gender" style="width:100%" property="mainreq/recruitedgender" title="性别" >
					<h:option label="--------请选择--------" value=""/>
					<h:option label="女" value="M"/>
					<h:option label="男" value="F"/>
				</h:select></td>
				<th>电话<span class="important" >*</span></th>
				<td><h:text id="recruitedtel" property="mainreq/recruitedtel" title="电话" /></td>
			</tr>
			<tr>
				<th>邮箱<span class="important">*</span></th>
				<td><h:text id="recruitedreqmail" property="mainreq/recruitedreqmail" title="邮箱"/></td>
				<th>学历<span class="important">*</span></th>				
				<td><h:text id="recruitededucation" property="mainreq/recruitededucation" title="学历"/></td>
				<th>前公司<span class="important">*</span></th>
				<td colspan="3"><h:text id="beforecompanies" property="mainreq/beforecompanies" title="前公司"/></td>					
			</tr>
			<tr>
				<th>前公司职位<span class="important">*</span></th>
				<td><h:text id="beforeposition" property="mainreq/beforeposition" title="前公司职位"/></td>
				<th>员工类别<span class="important">*</span></th>				
				<td><h:select id="employeeCategory" style="width:100%" property="mainreq/employeeCategory" title="员工类别">
					<!--  空value勿删-->
					<h:option label="--------请选择--------" value=""/>
					<h:option label="正式员工" value="1"/>
					<h:option label="实习生" value="2"/>
					<h:option label="临时实习生" value="3"/>
					<h:option label="顾问" value="4"/>
					<h:option label="退休返聘" value="5"/>
				</h:select></td>
				<th>是否为高端人才<span class="important">*</span></th>
				<td colspan="3">
				<h:select id="isht" style="width:100%" property="mainreq/isht" title="是否为高端人才  ">
					<!--  空value勿删-->
					<h:option label="--------请选择--------" value=""/>
					<h:option label="是" value="Y"/>
					<h:option label="否" value="N"/>
				</h:select>
				</td>					
			</tr>
			<tr>
			    <h:hidden property="mainreq/userorgid" id="userorgid"/>
	        		    <h:hidden property="mainreq/userorgname" id="userorgname"/>
				<th>用人部门<span class="important">*</span></th>
				<td colspan="5"><h:text id="userorgnameqm" property="mainreq/userorgnameqm" onmousedown="iframe(this);" title="用人部门"/></td>
				<th>工作地点</th>				
				<td><h:text  id="workadd" property="mainreq/workadd"/></td>					
			</tr>
			<tr>				
				<th>职位<span class="important">*</span></th>
				<td><h:text property="mainreq/recruitedposition" id="recruitedposition" onfocus="upwin(this,'','grid_0','职务','recruitedposition');" title="职位"/></td>
				<th>序列-等级<span class="important">*</span></th>				
				<td><h:text property="mainreq/jobRank" id="jobRank" title="序列-等级"/></td>
				<th>渠道来源<span class="important">*</span></th>
				<!-- <td>
				<h:text property="mainreq/channelResource" />
				</td> -->
				<td><h:select id="channelresource" property="mainreq/channelresource" title="渠道来源">
					<!--  空value勿删-->
					<h:option label="--------请选择--------" value=""/>
					<h:option label="智联" value="1"/>
					<h:option label="前程无忧" value="2"/>
					<h:option label="58同城" value="3"/>
					<h:option label="猎聘" value="4"/>
					<h:option label="Boss直聘" value="5"/>
					<h:option label="微信推荐" value="6"/>
					<h:option label="内部推荐" value="7"/>
					<h:option label="猎头" value="8"/>
					<h:option label="其他" value="9"/>
				</h:select></td>
				 <td colspan="2"><h:text id="channelResourceother" property="mainreq/channelresourceother"  /></td>			
			</tr>
			<tr>
				<th>备注：</th>
				<td colspan="7"><h:textarea id="recruitedremark" property="mainreq/recruitedremark" title="mainreq/recruitedremark"/></td>
			</tr>
</table>
<h3 class="h3_title">薪酬信息</h3>
		<table class="table_box **table_twoInfo**" cellspacing="0">
			<tr>
				<th>试用期薪资(元/月)<span class="important">*</span></th>
				<td><h:text id="probasalary" style="width:87%" property="mainreq/probasalary" title="试用期薪资"/>(税前)</td>
				<th>转正薪资(元/月)<span class="important">*</span></th>				
				<td><h:text id="formsalary" style="width:87%" property="mainreq/formsalary" title="转正薪资"/>(税前)</td>
				<th>试用期(月)<span class="important">*</span></th>
				<td><h:text id="probadate" property="mainreq/probadate" title="试用期"/></td>
			</tr>
			<tr>
				<th>餐补(元/月)<span class="important">*</span></th>
				<td><h:text id="formmeal" property="mainreq/formmeal" title="餐补"/></td>
				<th>通讯补助(元/月)<span class="important">*</span></th>				
				<td><h:text id="formcom" property="mainreq/formcom" title="通讯补助"/></td>		
			</tr>
			<tr>
				<th>交通补助(元/月)<span class="important">*</span></th>
				<td><h:text id="formtraffic" property="mainreq/formtraffic" title="交通补助"/></td>
				<th>其他补助(元/月)</th>	
				<td><h:text id="formother" property="mainreq/formother"/></td>					
			</tr>							
		</table>		
		<table width="100%" class="table_box" cellspacing="0">
			<tr class="phone_button">
            <td align="center" style="border:0">
               </td>
           </tr>
		<tr class="phone_button">
            <td align="center" style="border:0">
               <input type="button" id="submit_appl" class="button3"  name="bt" onclick="**pasRecordInsert()**;" value='提交'>
               <input type="button" name="bt" onclick="backMainList();" class="button3" value="返回">
             </td>
           </tr>
</table>

页面如下：

js提交方法：

		function **pasRecordInsert()** {   //提交
			var oneInfo = **submit.getjson('.table_oneInfo');**
			if(oneInfo==false){
				return;
			}
			var twoInfo = **submit.getjson('.table_twoInfo');**
			if(twoInfo==false){
				return;
			}
			**nui.parse();//此处使用的是nui的提交方式，可直接用ajax方法代替
			var frm = $name("data_form");
			frm.elements["_eosFlowAction"].value = "insertAndFlowSubmit";
			frm.submit();	
			auditConfirm(4,frm);**
		}

校验方法：

var submit={
		getjson: function(clssname){
			var flage = true;
			var nowdiv=$(clssname);
			var set=nowdiv.find("input,select,textarea");
			var json={};
			var count=set.length;
			$.each(set,function(index,item){
				var title = item.title;
				var value = item.value;
				if(item.id!=""&&value!=""){
					
					if(item.id=='recruitedreqmail'){
						var msg = matchMail(value);
						if(msg==true){
							json[item.id] = value;
						}else{
							layer.alert("请输入有效的电子邮箱!");    //layer Pc版方法
							flage = false;
							return flage;
						}
					}
					
					if(item.id=='recruitedtel'){
						var msg = matchTel(value);
						if(msg==true){
							json[item.id] = value;
						}else{
							layer.alert("请输入有效的电话号码!");
							flage = false;
							return flage;
						}
					}
					
				}else{
					var info = matchText(title);
					if(info==true){
						flage = false;
						layer.alert(item.title+"不能为空!");
						return flage;
					}
				}
				
			});
			if(flage==false){
				return false;
			}else{
				return json;
			}

		}
}
	
	function matchText(title){
		var han = /^[\u4e00-\u9fa5]+$/;//校验非汉字
		if (!han.test(title)) {
	        return false;
	    }else{
	    	  return true;
	    }
	}
	
	function matchMail(value){
		var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; //校验邮箱
		if (!reg.test(value)) {
	        return false;
	    }else{
	    	return true;
	    }
	}

	function matchTel(value){
		var mobile = /^1[3|4|5|6|7|8|9]\d{9}$/;//校验电话号码
		if (!mobile.test(value)) {
	        return false;
	    }else{
	    	return true;
	    }
	}