form表单 onsubmit 坑爹之旅

最新推荐文章于 2023-04-12 11:07:26 发布

harchiharchi

最新推荐文章于 2023-04-12 11:07:26 发布

阅读量1.6k

点赞数 2

分类专栏： java-web 文章标签： html 表单 javascript

本文链接：https://blog.csdn.net/caibaoh/article/details/78198190

版权

java-web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

有时在提交form表单数据时，希望可以对数据的合法性进行判断，当某些数据不合法时给出友好提示，并保留已经输入并合法的数据，当所有数据均合法时才进行提交。这个可以在from表单提交的后台代码来实现，也可以直接在JSP（HTML）页面来实现。有时为了实现的简便和减轻后台的压力，选择在JSP(HTML)页面来实现对数据的合法性进行判断。以下便来实现这个功能。

form表单有个onsubmit的属性，该属性使用判断是否提交form表单的，其默认值为true，即提交，当其值为false时，表单不进行提交。那么就可以通过js代码来实现数据合法性判断并决定是否提交表单，于是便有了以下的代码：

<HTML>
      <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      </head>
     <BODY>
          <form action="http://www.baidu.com" οnsubmit="return submit()">
            <input type="text" id="ff">
             <input type="submit" id="submit" value ="提交"/>
        </form>
     </BODY>
         <script language="javascript">
             function submit(){
                var val = document.getElementById("ff").value;
                 alert(val);
                 if(val == "去百度"){
				 
                     return true;
                 }
                else{
                    alert("校验失败，不进行提交");
                     return false;
                }
            }
     </script>
 </HTML>

人品保证，以上代码没有任何语法错误。使用Firebug调试没有任何问题，该代码检查输入框的值是否为“去百度”，如果是则跳转到百度首页，如果不是，弹出提示，不实现跳转。但是........以上代码执行时既没有实现对数据合法性的判断，也没有实现提示的弹出，无论数据合不合法，点击提交后都会跳转到百度页面。这是什么鬼呀？浏览器抽风了？还是我的基础知识不扎实？οnsubmit=“return submit（）”，return 这个关键字加上了，代码的逻辑也没有错。但是就是没有实现相应的功能。捣鼓了好久，试过将提交改为“button”提交，然而也是不行。好吧，应该是浏览器抽风了，关机重启（PS:关机重启大法好，每次代码明明没错，可就是没有实现相应的功能，这时关机重启再运行就奇迹般的可以了）。但是......这次没奏效........

没辙了？！！！百度了一下，还是挺多人遇到这个坑的，但是我不小心看到了一个函数命名最好不要是关键字，好吧，submit是关键字，于是，改一下咯，把函数submit（）改为sub（），代码如下：

<HTML>
      <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      </head>
     <BODY>
          <form action="http://www.baidu.com" οnsubmit="return sub()">
            <input type="text" id="ff">
             <input type="button" id="submit" value ="提交"/>
        </form>
     </BODY>
         <script language="javascript">
             function sub(){
                var val = document.getElementById("ff").value;
                 alert(val);
                 if(val == "去百度"){
				 
                     return true;
                 }
                else{
                    alert("校验失败，不进行提交");
                     return false;
                }
            }
     </script>
 </HTML>

很好，真的好，功能实现了！！好吧，最后来总结一下：

1、form表单的onsubmit属性的书写规则为：οnsubmit=“return 函数名（）”，注意“return”关键字不能少！！

2、进行数据合法性判断的函数的命名最好不要与关键字相同！