form表单 onsubmit 坑爹之旅

来源：互联网发布：xl player for mac 编辑：程序博客网时间：2024/06/14 05:46

有时在提交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" onsubmit="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调试没有任何问题，该代码检查输入框的值是否为“去百度”，如果是则跳转到百度首页，如果不是，弹出提示，不实现跳转。但是........以上代码执行时既没有实现对数据合法性的判断，也没有实现提示的弹出，无论数据合不合法，点击提交后都会跳转到百度页面。这是什么鬼呀？浏览器抽风了？还是我的基础知识不扎实？onsubmit=“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" onsubmit="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属性的书写规则为：onsubmit=“return 函数名（）”，注意“return”关键字不能少！！

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

阅读全文

0 0