使用JQuery进行表单验证,aspx部分代码如下:
Code
<form id="InfoTableFrom" runat="server">
<div>
<table width="100%">
<tr>
<td>
<!--此部分程序生成-->
<div id="InfoTableDiv">
<div id="InfoTableHead">市场调研表</div>
<div id="InfoTableDescript">市场调查</div>
<div id="InfoTableRow">
<div id="InfoTableTitleCol">对应市场</div>
<div id="InfoTableCtrlCol"><input name="a_Varchar_changc" type="text" id="a_Varchar_changc" maxlength="50" /><font color="red"><b>*</b></font></div>
</div>
<div id="InfoTableRow">
<div id="InfoTableTitleCol">所在地区</div>
<div id="InfoTableCtrlCol"><input name="a_Varchar_diqu" type="text" id="a_Varchar_diqu" maxlength="50" /></div>
</div>
<div id="InfoTableRow">
<div id="InfoTableTitleCol">全年销量</div>
<div id="InfoTableCtrlCol"><input name="a_int_xiaoliang" type="text" id="a_int_xiaoliang" style="width:50px;" /></div>
</div>
<div id="InfoTableRow">
<div id="InfoTableTitleCol">市场份额</div>
<div id="InfoTableCtrlCol"><input name="a_float_fe" type="text" id="a_float_fe" style="width:50px;" /></div>
</div>
<div id="InfoTableRow">
<div id="InfoTableTitleCol">当前等级</div>
</div>
<div id="InfoTableRow">
<div id="InfoTableTitleCol">22</div>
<div id="InfoTableCtrlCol"><input name="a_Varchar_222" type="text" id="a_Varchar_222" maxlength="50" style="width:22px;" />
<div class="lblDescript">222</div></div>
</div>
</div>
<script type="text/javascript">
$(function(){
$.validator.setDefaults({
submitHandler: function(form) { form.submit(); }
});
jQuery.validator.addMethod("isInt", function(value, element) {
return this.optional(element) || /^\d*$/.test(value);
}, " 数据类型不正确,只能填写整数");
jQuery.validator.addMethod("isFloat", function(value, element) {
return this.optional(element) || /^\d+\.\d{0,7}$/.test(value);
}, " 数据类型不正确,必须填写小数格式如:1.0");
$(InfoTableFrom).validate({
rules:{
"a_Varchar_changc" : { required: true}
, "a_int_xiaoliang" : {isInt : true}
, "a_float_fe" : {isFloat : true}
},
messages:{
"a_Varchar_changc" : { required: " 请填写市场"}
}
});
});
</script>
<!--程序生成代码结束-->
</td>
</tr>
<tr>
<td align="center">
<asp:Button ID="btnOK" runat="server" onclick="btnOK_Click" Text=" 确定 " />
<input id="Button1" type="button" onclick="javascript:self.close()" value=" 关闭 " /></td>
</tr>
</table>
</div>
</form>
以上代码运行后,当我们点击“确定”按钮,页面发生PostBack,但是并没有引发“确定”按钮的事件处理程序。我去掉上面的JQuery的代码,事件就可以引发。
经过分析得出原因:
JQuery的Form Validate plugin,在实际提交时并不提交Input type为button的值,所以asp.net无法定位事件处理程序。
解决办法很简单,就是在Form里再放一个hidden input
<input type="hidden" name="btnOK" value=" 确定 " />
注意这个name一定要跟要引发事件的按钮的最终客户端name相同。
再点“确定”程序可以按预期的正常运行。