表单验证框架formValiditor、formvaliditorRegex的使用
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新建、修改铁路运输信息</title>
<link href="${pageContext.request.contextPath }/styles/contract/css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${pageContext.request.contextPath }/scripts/contract/datepicker/WdatePicker.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath }/scripts/errand/validatorAuto.css" type="text/css" />
<script type="text/javascript" src="${pageContext.request.contextPath }/scripts/errand/jquery-1.4.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/scripts/errand/formValidator.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/scripts/errand/formValidatorRegex.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/scripts/errand/MyValidator.js"></script>
<script type="text/javascript">
$(document).ready(function(){
validate();
});
function validate(){
$.formValidator.initConfig({
alertmessage:true,
autotip:true,
onerror:function(msg,id){
showErrInfo(msg,id,0,0);
}
});
$("#transportBatchNo").formValidator({onshow:"",onfocus:"",oncorrect:""}).inputValidator({min:1,onerror:"货运批次编号不能为空！"});
$("#trainNo").formValidator({onshow:"",onfocus:"",oncorrect:""}).inputValidator({min:1,onerror:"车次号不能为空"});
$("#goodsName").formValidator({onshow:"",onfocus:"",oncorrect:""}).inputValidator({min:1,onerror:"货物名称不能为空"});
$("#extimateStartTime1").formValidator({onshow:"",onfocus:"",oncorrect:""}).inputValidator({min:1,onerror:"预计到始发站日期不能为空"});
$("#realStartTime1").formValidator({onshow:"",onfocus:"",oncorrect:""}).inputValidator({min:1,onerror:"实际到始发站日期不能为空"});
$("#depatchTime1").formValidator({onshow:"",onfocus:"",oncorrect:""}).inputValidator({min:1,onerror:"发运日期不能为空"});
$("#extimateEndTime1").formValidator({onshow:"",onfocus:"",oncorrect:""}).inputValidator({min:1,onerror:"预计到终点站日期不能为空"});
$("#realEndTime1").formValidator({onshow:"",onfocus:"",oncorrect:""}).inputValidator({min:1,onerror:"实际到终点站日期不能为空"});
$("#realEndTime1").formValidator().compareValidator({desid:"depatchTime1",operateor:">",onerror:"发运日期不能大于实际到终点站日期"});
$("#roughWeight").formValidator({onshow:"",onfocus:"",oncorrect:""}).regexValidator({regexp:"^[0-9]+([.]{1}[0-9]+){0,1}{1}quot;,onerror:"请输入正确的数字"});
$("#volume").formValidator({onshow:"",onfocus:"",oncorrect:""}).regexValidator({regexp:"^[0-9]+([.]{1}[0-9]+){0,1}{1}quot;,onerror:"请输入正确的数字"});
}
function jspsubmit(){
if(!$.formValidator.pageIsValid('1')){
return false;
}
}
</script>
</head>
以上为页面头部信息，以下页面内容体中的表单:
<body>
<c:if test="${type=='add'}">
<div class="cc">新建铁路运输信息</div>
<form:form action="${pageContext.request.contextPath }/logistics/addRailWayTrans.do" method="post" modelAttribute="railwayTransportation" onsubmit="return jspsubmit();">
<input type="hidden" name="projectId" id="projectId" value="${projectId}">
<div class="rightcontent2">
<table border="0" cellpadding="2" cellspacing="1" width="90%"
bordercolor="#FFFFFF" bgcolor="#13C9EF" >
<tr>
<td colspan="2" align="left" valign="middle" bgcolor="#D0F5FD" class="tableword">运输基本信息:</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#D0F5FD" class="tableword">运输方式:</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" class="tableword">铁路运输</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#D0F5FD" class="tableword">始发站:</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" class="tableword">
<select name="startStation" id="startStation" class="select">
<option value="上海港">上海港</option>
<option value="大连港">大连港</option>
<option value="天津港">天津港</option>
<option value="青岛港">青岛港</option>
<option value="阿拉山口">阿拉山口</option>
<option value="满洲里">满洲里</option>
</select>
</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#D0F5FD" class="tableword">过境站：</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" class="tableword">
<select class="select" name="transitStation" id="transitStation">
<option value="上海港">上海港</option>
<option value="大连港">大连港</option>
<option value="天津港">天津港</option>
<option value="青岛港">青岛港</option>
<option value="阿拉山口">阿拉山口</option>
<option value="满洲里">满洲里</option>
</select>
</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#D0F5FD" class="tableword">终到站:</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" class="tableword">
<select class="select" name="endStation" id="endStation">
<option value="巴西">巴西</option>
<option value="鸦鬓思维克">鸦鬓思维克</option>
<option value="西亚图">西亚图</option>
</select>
</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#D0F5FD" class="tableword">批次编号:</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" class="tableword">
<input type="text" class="input" id="transportBatchNo" name="transportBatchNo">
</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#D0F5FD" class="tableword">车次号:</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" class="tableword">
<input type="text" class="input" name="trainNo" id="trainNo">
</td>
</tr>
<tr>
<td colspan="2" align="left" valign="middle" bgcolor="#D0F5FD" class="tableword">货物信息：</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#D0F5FD" class="tableword">货物名称:</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" class="tableword">
<input type="text" class="input" name="goodsName" id="goodsName">
</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#D0F5FD" class="tableword">车皮数:</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" class="tableword">
<input type="text" class="input" readonly="readonly" value="0" name="wagonCount" id="wagonCount">(不需填)
</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#D0F5FD" class="tableword">毛重(吨)：</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" class="tableword">
<input type="text" class="input" id="roughWeight" name="roughWeight">吨(T)
</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#D0F5FD" class="tableword">体积(立方米)：</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" class="tableword">
<input type="text" class="input" name="volume" id="volume">立方米(m³)
</td>
</tr>
<tr>
<td colspan="2" align="left" valign="middle" bgcolor="#D0F5FD" class="tableword">运输时间信息：</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#D0F5FD" class="tableword">预计到始发站日期：</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" class="tableword">
<input type="text" class="input" id="extimateStartTime1" name="extimateStartTime1" readonly="readonly"
onclick="WdatePicker({doubleCalendar:true,skin:'whyGreen',maxDate:'2015-12-24'});">
</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#D0F5FD" class="tableword">实际到始发站日期:</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" class="tableword">
<input type="text" class="input" id="realStartTime1" name="realStartTime1" readonly="readonly"
onclick="WdatePicker({doubleCalendar:true,skin:'whyGreen',maxDate:'2015-12-24'});">
</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#D0F5FD" class="tableword">发运日期:</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" class="tableword">
<input type="text" class="input" id="depatchTime1" name="depatchTime1" readonly="readonly"
onclick="WdatePicker({doubleCalendar:true,skin:'whyGreen',maxDate:'2015-12-24'});">
</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#D0F5FD" class="tableword">预计到终点站日期:</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" class="tableword">
<input type="text" class="input" id="extimateEndTime1" name="extimateEndTime1" readonly="readonly"
onclick="WdatePicker({doubleCalendar:true,skin:'whyGreen',maxDate:'2015-12-24'});">
</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#D0F5FD" class="tableword">实际到终点站日期:</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" class="tableword">
<input type="text" class="input" id="realEndTime1" name="realEndTime1" readonly="readonly"
onclick="WdatePicker({doubleCalendar:true,skin:'whyGreen',maxDate:'2015-12-24'});">
</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#D0F5FD" class="tableword">备注:</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" class="tableword">
<form:textarea path="remark" rows="3" cols="18" cssClass="textarea"/>
</td>
</tr>
<tr>
<td align="left" valign="middle" bgcolor="#FFFFFF" class="tableword" ></td>
<td align="left" valign="middle" bgcolor="#FFFFFF" class="tableword" >
<input type="submit" value="新 建" class="button">
<input type="button" value="返 回" class="button" onclick="javascript:window.history.go(-1)">
</td>
</tr>
</table>
</div>
</form:form>
</c:if>
<c:if test="${type=='up'}">除了可以学到了表单框架的使用方法，这里边包含了WDatePicker的使用，
也包含了页面共用的思路，即用type来区别