form的onsubmit事件--表单提交前的验证最佳实现方式

最新推荐文章于 2021-08-06 14:55:27 发布

嘟嘟QQ7

最新推荐文章于 2021-08-06 14:55:27 发布

阅读量5.3k

点赞数

分类专栏： js+ajax+jquery

js+ajax+jquery 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

遇到了一个问题，页面中include了很多的公共页面（都是没有form的），并且里面好多的地方都是自行提交的（页面中加入一个type=“submit”域，然后js中写入sumbit.click来执行提交的）。但我需要在每次提交前都要验证一下表单中的填写是否符合要求，如果我给每个提交的地方都添加验证函数的调用，那工作量就大了。

这时我得需要一个措施，就是在表单提交前统一进行验证。从body有页面关闭前的事件onbeforeunload推想到，form应该也有提交前的事件，上网一查，真有，就是onsubmit。此事件的功能就是在表单提交前自动执行指定的东西。

需要注意的是，οnsubmit=“return check()”中的return是一定要加上的，不然check的返回值哪怕是false，仍然提交。也就是说，οnsubmit=“return false”为不执行提交；οnsubmit=“return true”或οnsubmit=“return ”都执行提交；

------------------------------------------

主页面如下：

<HTML>

<HEAD>

//form提交前，验证：营销活动最少选择两个
function check(){
    if(验证条件不通过){
        return false;
    }else{

return true;//不写此返回值也行，此时就直接提交了

}
}
</script>

</HEAD>
<body οnlοad="doOnLoad()">
<form id="queryForm" οnsubmit="return check()" action="<%=request.getContextPath()%>/FocReportServlet">

<jsp:include flush="true" page="../pub.jsp"/>
<jsp:include flush="true" page="../condition.jsp"/>
<jsp:include flush="true" page="condition_marketing.jsp"/>
<jsp:include flush="true" page="contrastChart.jsp"/>

<jsp:include flush="true" page="../pagectrl.jsp"/>

...

<HTML>

-----------------------------------

include页面中提交方式：

<img src="<%=request.getContextPath()%>/focReport/images/control_play_blue.png" style="cursor:hand" οnclick="sending.style.visibility='visible';submit.click()" alt="点击提交分析">

DWZ 中界面提示

alertMsg.confirm("确认删除场地及所有相关信息(场位、业主、租户、科目、收费)。此操作不可逆转", {
    okCall : function() {
     ajaxTodo('${ctx}/lpcd/delete/${lpCd.id}', navTabAjaxDone);
    }
   });

alertMsg.warn("请选择场地！");

嘟嘟QQ7

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
form的onsubmit事件--表单提交前的验证最佳实现方式

遇到了一个问题，页面中include了很多的公共页面（都是没有form的），并且里面好多的地方都是自行提交的（页面中加入一个type=“submit”域，然后js中写入sumbit.click来执行提交的）。但我需要在每次提交前都要验证一下表单中的填写是否符合要求，如果我给每个提交的地方都添加验证函数的调用，那工作量就大了。这时我得需要一个措施，就是在表单提交前统一进行验证。从body
复制链接

扫一扫