正文

Javascript_06_表单验证（离开单项，输入框后提示信息）

IP云
IP云V管理员/7 阅读
09/05
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Javascript_06_ 表单验证（离开单项，输入框后提示信息）

说明：对于必须输入的入力框，光标离开（使用 onblur方法）时进行检查。假如有错，红色的提示信息直接在该画面的这个输入框的后面显示出来，并把光标重新定向到这个输入框。

待解决问题：

①    内存泄漏问题：比如用户名没输入，离开用户名输入框时，画面上会给出提示警告信息；此时再点击密码输入框时，会导致 IE占用很大的内存，好像是内存泄漏了。

②    对于选择框的检查问题（上述方法是在从输入框离开时进行检查），对于选择框，我直接没有点击选择，又怎么检查呢？此问题扩展开来，假如用户直接没有将光标放入过必须输入项，那这一项的检查也就无从谈起了。极端些，假如用户什么也没有输入，就直接点击提交，这种检查机制就不会起作用。前面那个弹警告框的验证方式，虽然用户体验不太好，但是肯定能起作用。

这边只是先将这种用户体验比较好的检查机制的原理用代码表现一下，以下的这两个文件还需要改善。但这种用户体验比较好的检查机制是以后的发展方向，也是我们要努力的方向。

1.      regcheckdata2.js

[javascript] view plaincopy
  1. function checkdata() {
  2. var ssn=form.username.value.toLowerCase();
  3. if (!checkUserName(ssn)) return false;  //用户名检查
  4. var pwd1 = form.pwd.value;
  5. if (!checkPassword1(pwd1)) return false;  //密码1检查
  6. var pwd2 = form.pwd2.value;
  7. if (!checkPassword1(pwd2)) return false;  //确认密码检查
  8. //检查性别
  9. if( !(form.sex[0].checked || form.sex[1].checked) ) {
  10. alert("请选择性别!");
  11. form.sex[0].focus();
  12. return false;
  13. }
  14. //检查省份
  15. if( form.province.selectedIndex == 0 ) {
  16. alert("请选择省份!");
  17. form.province.focus();
  18. return false;
  19. }
  20. if(form.intro.value == "") {
  21. alert("/自我介绍不能为空!");
  22. form.intro.focus();
  23. return false;
  24. }
  25. return true;
  26. }
  27. // 用户名检查
  28. function checkUserName(ssn){
  29. if( ssn.length<3 || ssn.length>18 ) {
  30. document.getElementById("usernameErr").innerHTML = "<font color='red'>
  31. 请输入正确的用户名,用户名长度为3-18位！</font>";
  32. form.username.focus()
  33. return false;
  34. }
  35. if (isWhiteWpace(ssn)){
  36. document.getElementById("usernameErr").innerHTML = "<font color='red'>请输入正确的用户名,用户名中不能包含空格！</font>";
  37. form.username.focus()
  38. return false;
  39. }
  40. if (!isSsnString(ssn)){
  41. document.getElementById("usernameErr").innerHTML = "<font color='red'>对不起，您选择的用户名不正确或已被占用！用户名/n由a～z的英文字母(不区分大小写)、0～9的数字、点、减/n号或下划线组成，长度为3～18个字符，只能以数字或字母/n开头和结尾,例如:kyzy_001。</font>";
  42. form.username.focus()
  43. return false;
  44. }
  45. //输入正确的用户名后，将上次的错误提示信息清掉
  46. document.getElementById("usernameErr").innerHTML = "";
  47. return true;
  48. }
  49. //密码检查
  50. function checkPassword1(pwd1) {
  51. if( strlen(pwd1)<6 || strlen(pwd1)>16 ) {
  52. //alert("/正确地登录密码长度为6-16位，仅可用英文、数字、特殊字符！")
  53. document.getElementById("pwdErr").innerHTML = "<font color='red'>正确地登录密码长度为6-16位，仅可用英文、数字、特殊字符！</font>";
  54. form.pwd.focus()
  55. return false;
  56. }
  57. if( strlen2(pwd1) ) {
  58. //alert("/您的密码中包含了非法字符，仅可用英文、数字、特殊字符！")
  59. document.getElementById("pwdErr").innerHTML = "<font color='red'>您的密码中包含了非法字符，仅可用英文、数字、特殊字符！</font>";
  60. form.pwd.focus()
  61. return false;
  62. }
  63. if( pwd1 == form.username.value ) {
  64. //alert("/用户名和密码不能相同！")
  65. document.getElementById("pwdErr").innerHTML = "<font color='red'>密码和用户名不能相同！</font>";
  66. form.pwd.focus()
  67. return false;
  68. }
  69. document.getElementById("pwdErr").innerHTML = "";
  70. return true;
  71. }
  72. //确认密码检查
  73. function checkPassword2(pwd2) {
  74. if( pwd2 =="" ) {
  75. //alert("/请输入密码确认！")
  76. document.getElementById("pwd2Err").innerHTML = "<font color='red'>请输入密码确认！</font>";
  77. form.pwd2.focus()
  78. return false;
  79. }
  80. if( pwd2 != form.pwd.value ) {
  81. //alert("/两次密码输入不一致！")
  82. document.getElementById("pwd2Err").innerHTML = "<font color='red'>两次密码输入不一致！</font>";
  83. form.pwd2.focus()
  84. return false;
  85. }
  86. document.getElementById("pwd2Err").innerHTML = "";
  87. return true;
  88. }
  89. function strlen(str){
  90. var len;
  91. var i;
  92. len = 0;
  93. for (i=0;i<str.length;i++){
  94. if (str.charCodeAt(i)>255) len+=2; else len++;
  95. }
  96. return len;
  97. }
  98. function strlen2(str){
  99. var len;
  100. var i;
  101. len = 0;
  102. for (i=0;i<str.length;i++){
  103. if (str.charCodeAt(i)>255) return true;
  104. }
  105. return false;
  106. }
  107. function isWhiteWpace (s)
  108. {
  109. var whitespace = " /t/n/r";
  110. var i;
  111. for (i = 0; i < s.length; i++){
  112. var c = s.charAt(i);
  113. if (whitespace.indexOf(c) >= 0) {
  114. return true;
  115. }
  116. }
  117. return false;
  118. }
  119. function isSsnString (ssn)
  120. {
  121. var re=/^[0-9a-z][/w-.]*[0-9a-z]$/i;
  122. if(re.test(ssn))
  123. return true;
  124. else
  125. return false;
  126. }
  127. function checkssn(gotoURL) {
  128. var ssn=form.username.value.toLowerCase();
  129. if (checkUserName(ssn)){
  130. var open_url = gotoURL + "?username=" + ssn;
  131. window.open(open_url,'','status=0,directories=0,resizable=0,toolbar=0,location=0,scrollbars=0,width=322,height=200');
  132. }
  133. }

2.      userReg2.html

[javascript] view plaincopy
  1. <html>
  2. <head>
  3. <title>表单</title>
  4. <mce:script language=JavaScript src="script/regcheckdata.js" mce_src="script/regcheckdata.js"></mce:script>
  5. <mce:script type="text/javascript"><!--
  6. // --></mce:script>
  7. </head>
  8. <body>
  9. <form name="form" action="01.html" method="get" onSubmit="return checkdata()">
  10. <table width="750" align="center" border="2">
  11. <tr>
  12. <td colspan="2" align="center">用户注册</td>
  13. </tr>
  14. <tr>
  15. <td>用户名：</td>
  16. <td>
  17. <input type=text name="username" size="30" maxlength="10" onblur="checkUserName(this.value.toLowerCase())">
  18. <span id="usernameErr"></span>//同一行（首选）
  19. <!--<div id="usernameErr"></div>-->//另起一行
  20. </td>
  21. </tr>
  22. <tr>
  23. <td>密码：</td>
  24. <td>
  25. <input type=password name="pwd" size="15" maxlength="12" onblur="checkPassword1(this.value)">
  26. <span id="pwdErr"></span>
  27. </td>
  28. </tr>
  29. <tr>
  30. <td>密码确认</td>
  31. <td>
  32. <input type=password name="pwd2" size="15" maxlength="12" onblur="checkPassword2(this.value)">
  33. <span id="pwd2Err"></span>
  34. </td>
  35. </tr>
  36. <tr>
  37. <td>性别</td>
  38. <td>
  39. <input type=radio name="sex" value="male">男
  40. <input type=radio name="sex" value="female">女
  41. </td>
  42. </tr>
  43. <tr>
  44. <td>你感兴趣</td>
  45. <td>
  46. <input type="checkbox" name="interest" value="vc" checked>VC
  47. <input type="checkbox" name="interest" value="vb">VB
  48. <input type="checkbox" name="interest" value="vfoxpro">VF
  49. <input type="checkbox" name="interest" value="vjava">VJ
  50. <br>
  51. <input type="checkbox" name="interest" value="bc">BC
  52. <input type="checkbox" name="interest" value="cobol">CO
  53. <input type="checkbox" name="interest" value="java">JA
  54. <input type="checkbox" name="interest" value="delphi">Delphi
  55. </td>
  56. </tr>
  57. <!--必须选中JSP-->
  58. <input type="hidden" name="interest" value="jsp">
  59. <tr>
  60. <td>你感兴趣</td>
  61. <td>
  62. <select name="interest2" size=8 multiple>
  63. <option value="vc" selected>VC</option>
  64. <option value="vb">VB</option>
  65. <option value="vfoxpro">VF</option>
  66. <option value="vjava">VJ</option>
  67. <option value="bc">BC</option>
  68. <option value="cobol">CO</option>
  69. <option value="java">JA</option>
  70. <option value="delphi">Delphi</option>
  71. </select>
  72. </td>
  73. </tr>
  74. <tr>
  75. <td>你来自</td>
  76. <td>
  77. <select name="province">
  78. <option value=0 selected>请选择</option>
  79. <option value=34>安徽</option>
  80. <option value=11>北京</option>
  81. <option value=50>重庆</option>
  82. <option value=35>福建</option>
  83. <option value=62>甘肃</option>
  84. <option value=44>广东</option>
  85. <option value=45>广西</option>
  86. <option value=52>贵州</option>
  87. <option value=46>海南</option>
  88. <option value=13>河北</option>
  89. <option value=23>黑龙江</option>
  90. <option value=41>河南</option>
  91. <option value=42>湖北</option>
  92. <option value=43>湖南</option>
  93. <option value=32>江苏</option>
  94. <option value=36>江西</option>
  95. <option value=22>吉林</option>
  96. <option value=21>辽宁</option>
  97. <option value=64>宁夏</option>
  98. <option value=15>内蒙古</option>
  99. <option value=63>青海</option>
  100. <option value=31>上海</option>
  101. <option value=14>山西</option>
  102. <option value=37>山东</option>
  103. <option value=51>四川</option>
  104. <option value=61>陕西</option>
  105. <option value=12>天津</option>
  106. <option value=54>西藏</option>
  107. <option value=65>新疆</option>
  108. <option value=53>云南</option>
  109. <option value=33>浙江</option>
  110. <option value=71>台湾</option>
  111. <option value=81>香港</option>
  112. <option value=82>澳门</option>
  113. <option value=0>其他</option>
  114. </select>
  115. </td>
  116. </tr>
  117. <tr>
  118. <td>自我介绍</td>
  119. <td>
  120. <textarea rows="12" cols="80" name="intro">