首页 > 代码库 > web 界面设计---js提交表单

web 界面设计---js提交表单

2024-07-27 17:05:03   225人阅读

Java代码  收藏代码
  1. <script type="text/javascript">  
  2. function checkImage(){  
  3.     var imageValue = document.getElementById("actorCard:imageField:image").value;  
  4.     if(imageValue !== ""){  
  5.        document.getElementById("actorCard").sumbit();   
  6.     }else if(imageValue == ""){  
  7.        alert("image field required !");  
  8.       document.getElementById("actorCard:imageField:image").focus();   
  9.        return false;  
  10.     }     
  11. }  
  12. </script>  

    上面那个代码是正确的，但是漏了这点:当用户输入一个或者多个空格的时候，它也可以通过验证的。所以要想更周全些就要加上这句话了:fieldValue = http://www.mamicode.com/fieldValue.replace(/s/gi,"");来把空格的情况去除掉。(在var定义的变量之后加上)

 

 按钮的代码：

Java代码  收藏代码
  1. <h:commandButton id="save" value=http://www.mamicode.com/"Save"   
  2. onclick="return checkImage()" action="#{actorCardHome.persist}"   
  3. disabled="#{!actorCardHome.wired}"  
  4. rendered="#{!actorCardHome.managed}" />  

 这里特别说明下：

      (1)在按钮的事件onclick="return checkImage()",而不是onclick="checkImage()"，否则达不到效果它同样会提交表单。

      (2) JS的判断空值和非空值这样来写：

            if(imageValue !== "") 和 if(imageValue =http://www.mamicode.com/="")

      (3)我这里的id可能是比较特殊的，因为我的是JSF的页面，所以要看源代码才可以知道id。

      (4)document.getElementById("actorCard:imageField:image").focus();这一句重新定位到那个必须填的字段的位置。这句比较好。特别提醒的是：这句后面的return false;如果没有它的话表单同样会提交，所以一定要记得把这句加上。

 

 

 

Java代码  收藏代码
  1.     上面的代码已经很完善了，但是我再次看的时候又有些遗漏的地方，所以我在把它补充完整。(因为我最近在做模板的时候出现了问题)  
  2. 1. signin.jsp  
  3. <script type="text/javascript" src=http://www.mamicode.com/"js/common.js"></script>  
  4. <s:form name="loginForm" action="./openid.servlet"  method="post">  
  5.    <table>  
  6.       <tr>  
  7.           <td align="right">Username:</td>  
  8.           <td align="left">  
  9.              <input type="text" id="username" name="username" value=http://www.mamicode.com/"" class="joinField"><br />  
  10.              <span id="error_username"></span>  
  11.            </td>  
  12.        </tr>  
  13.        <tr>  
  14.            <td align="right">Password:</td>  
  15.             <td align="left">  
  16.                 <input type="password" id="password" name="password" value=http://www.mamicode.com/"" class="joinField"><br />  
  17.     <span id="error_password"></span></td>  
  18.         </tr>  
  19.         <tr>  
  20.     <td align="right">  
  21.     <input type="submit" id="loginButton" onclick="return checkField();" value=http://www.mamicode.com/"login" class="btn-submit">  
  22.     </td>  
  23.     <td align="left"><br />  
  24.                <span id="error_login" class="error"></span></td>  
  25.          </tr>  
  26.     </table>  
  27. </s:form>  
  28. 这里我要说明三点：这个也是我出错的地方所在。  
  29. (1)这一句：<input type="submit" id="loginButton" onclick="return checkField();" value=http://www.mamicode.com/"login">里面的type="submit",非常重要，由于当时种种原因我不小心写成了type="button",所以导致我的执行在执行JS的时候总是提交不了。document.getElementById("loginForm").sumbit(); 这句是JS的提交代码。  
  30. (2)document.getElementById("loginForm").sumbit(); 这里的loginForm是指的是form表单的ID号而不是"提交按钮"的ID号，这里一定要注意。  
  31.   
  32.   
  33. (3)document.getElementById("error_username").innerHTML = "username is not null !";这里的"error_username"指的是ID哦，因为我当时在原有的代码上改没注意它当时是class，然后就报错，找了我好半天的功夫啊！  
  34. 2. common.js  
  35. function checkField(){     
  36.     var usernameValue = document.getElementById("username").value;     
  37.     var passwordValue = document.getElementById("password").value;   
  38.     usernameValue = usernameValue.replace(/\s/gi,"");  
  39.     passwordValue = passwordValue.replace(/\s/gi,"");  
  40.     if(usernameValue !== "" && passwordValue !== ""){    
  41.         这里不能写下面那个语句，如果写了后会提交form表单2次。而应该直接写return true;就可以了。切记！！  
  42.         //document.getElementById("loginForm").submit();   
  43.         return true;  
  44.     }else if(usernameValue == "" && passwordValue == ""){  
  45.         document.getElementById("error_username").innerHTML = "username is not null !";  
  46.         document.getElementById("error_password").innerHTML = "password is not null !";  
  47.         return false;     
  48.     }else if(usernameValue !== "" && passwordValue == ""){  
  49.      document.getElementById("password").focus();       
  50.      document.getElementById("error_username").innerHTML = "";  
  51.      document.getElementById("error_password").innerHTML = "password is not null !";  
  52.      return false;     
  53.     }else if(passwordValue !== "" && usernameValue == ""){  
  54.      document.getElementById("username").focus();       
  55.      document.getElementById("error_password").innerHTML = "";  
  56.      document.getElementById("error_username").innerHTML = "username is not null !";  
  57.      return false;     
  58.     }  
  59. }  

 

http://blog.csdn.net/haqer0825/article/details/8152829

http://solodu.iteye.com/blog/421587

web 界面设计---js提交表单


联系
我们