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


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

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

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

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

    主页面如下:

    <HTML>

    <HEAD>

    <script type="text/javascript">

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

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

        }
    }
    </script>

    </HEAD>
    <body onload="doOnLoad()">
    <form id="queryForm" onsubmit="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"/>

    ...

    <input type="submit" id="submit" name="submit" style="visibility:hidden"/>

    <HTML>

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

    include页面中提交方式:

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

  • 相关阅读:
    Leetcode 538. Convert BST to Greater Tree
    Leetcode 530. Minimum Absolute Difference in BST
    Leetcode 501. Find Mode in Binary Search Tree
    Leetcode 437. Path Sum III
    Leetcode 404. Sum of Left Leaves
    Leetcode 257. Binary Tree Paths
    Leetcode 235. Lowest Common Ancestor of a Binary Search Tree
    Leetcode 226. Invert Binary Tree
    Leetcode 112. Path Sum
    Leetcode 111. Minimum Depth of Binary Tree
  • 原文地址:https://www.cnblogs.com/yhtboke/p/5767448.html
Copyright © 2020-2023  润新知