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

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 = fieldValue.replace(/\s/gi,"");来把空格的情况去除掉。(在var定义的变量之后加上)

按钮的代码：

Java代码  

1. <h:commandButton id="save" value="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 == "")

(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="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="" 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="" 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="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="login">里面的type="submit",非常重要，由于当时种种原因我不小心写成了type="button",所以导致我的执行在执行JS的时候总是提交不了。document.getElementById("loginForm").sumbit(); 这句是JS的提交代码。
30. (2)document.getElementById("loginForm").sumbit(); 这里的loginForm是指的是form表单的ID号而不是"提交按钮"的ID号，这里一定要注意。
31. (3)document.getElementById("error_username").innerHTML = "username is not null !";这里的"error_username"指的是ID哦，因为我当时在原有的代码上改没注意它当时是class，然后就报错，找了我好半天的功夫啊！
32. 2. common.js
33. function checkField(){
34. var usernameValue = document.getElementById("username").value;
35. var passwordValue = document.getElementById("password").value;
36. usernameValue = usernameValue.replace(/\s/gi,"");
37. passwordValue = passwordValue.replace(/\s/gi,"");
38. if(usernameValue !== "" && passwordValue !== ""){
39. 这里不能写下面那个语句，如果写了后会提交form表单2次。而应该直接写return true;就可以了。切记！！
40. //document.getElementById("loginForm").submit();
41. return true;
42. }else if(usernameValue == "" && passwordValue == ""){
43. document.getElementById("error_username").innerHTML = "username is not null !";
44. document.getElementById("error_password").innerHTML = "password is not null !";
45. return false;
46. }else if(usernameValue !== "" && passwordValue == ""){
47. document.getElementById("password").focus();
48. document.getElementById("error_username").innerHTML = "";
49. document.getElementById("error_password").innerHTML = "password is not null !";
50. return false;
51. }else if(passwordValue !== "" && usernameValue == ""){
52. document.getElementById("username").focus();
53. document.getElementById("error_password").innerHTML = "";
54. document.getElementById("error_username").innerHTML = "username is not null !";
55. return false;
56. }
57. }

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

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