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定义的变量之后加上)

按钮的代码:

  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;如果没有它的话表单同样会提交,所以一定要记得把这句加上。

  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

最新文章

  1. 大数据之Yarn——Capacity调度器概念以及配置
  2. [Keygen]IntelliJ IDEA 14.1.7
  3. iis7 64位 操作excel的一系列问题(未完待续)
  4. FMDB浅析
  5. jquery异步加载json格式的数据
  6. Android开发(二十八)——基础功能函数
  7. PRML Chapter 1. Introduction
  8. 设计模式:建造者模式(Builder)
  9. 【转】让iframe在iOS设备手机浏览器上支持滚动
  10. TSharding:用于蘑菇街交易平台的分库分表组件
  11. Android访问C#的WebService要注意的问题
  12. 支持HTML5新标签
  13. Weka-学习
  14. CodeForces 146E - Lucky Subsequence DP+扩展欧几里德求逆元
  15. Linux的/etc/issue、/etc/issue.net和/etc/motd的区别
  16. api (三)文本字符输出 (转)
  17. Merge into的使用详解-你Merge了没有
  18. 2016&quot;百度之星&quot; - 资格赛(Astar Round1) Problem D
  19. 201521123090 《Java程序设计》第7周学习总结
  20. java基础复习+大数运算

热门文章

  1. linux 05
  2. 条款8:别让异常逃离析构函数(prevent exception from leaving destructors)
  3. tornado框架基础07-sqlalchemy查询
  4. elasticsearch 中文 term &amp; completion suggester
  5. 【MFC】利用MFC写一个计时器小程序
  6. js总结(三):面向对象,prototype ,oo模拟
  7. [luoguP1186] 玛丽卡(spfa)
  8. [luoguP1119] 灾后重建(Floyd)
  9. [NOIP1998] 提高组 洛谷P1011 车站
  10. [CodePlus2017]汀博尔