javascript – 如何使标签可见/不可见?

前端之家收集整理的这篇文章主要介绍了javascript – 如何使标签可见/不可见?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有这些日期和时间字段,我想设置一个 JavaScript验证的时间.

如果格式无效,它应该使标签可见,否则它应该是不可见的.

这是迄今为止的代码.

  1. <td nowrap="nowrap" align="left">
  2. <table border="0" cellpadding="0" cellspacing="0">
  3. <tr>
  4. <td align="right" nowrap="nowrap">
  5. <span id="startDateLabel">Start date/time: </span>
  6. <input id="startDateStr" name="startDateStr" size="8" onchange="if (!formatDate(this,'USA')) {this.value = '';}" />
  7. <button id="startDateCalendarTrigger">...</button>
  8. <input id="startDateTime" type="text" size="8" name="startTime" value="12:00 AM" onchange="validateHHMM(this.value);"/>
  9. <label id="startTimeLabel" visible="false">Time must be entered in the format HH:MM AM/PM</label>
  10. <BR>
  11. <span id="endDateLabel">End date/time: </span>
  12. <input id="endDateStr" name="endDateStr" size="8" onchange="if (!formatDate(this,'USA')) {this.value = '';}" />
  13. <button id="endDateCalendarTrigger">...</button>
  14. <input id="endDateTime" type="text" size="8" name="endTime" value="12:00 AM" onchange="validateHHMM2(this.value);"/>
  15. <label id="endTimeLabel" visible="false">Time must be entered in the format HH:MM AM/PM</label>
  16. </td>
  17. </tr>
  18. </table>
  19. </td>

问题是标签在加载时显示,无论我设置为可见.我尝试了可见度=“隐藏”,它仍然显示.

这是验证部分:

  1. <script>
  2. function validateHHMM(inputField) {
  3. var isValid = /^(0?[1-9]|1[012])(:[0-5]\d) [APap][mM]$/.test(inputField.value);
  4.  
  5. if (isValid) {
  6. document.getElementById("startTimeLabel").style.visibility = "hidden";
  7. }else {
  8. document.getElementById("startTimeLabel").style.visibility = "visible";
  9. }
  10.  
  11. return isValid;
  12. }
  13. function validateHHMM2(inputField) {
  14. var isValid = /^(0?[1-9]|1[012])(:[0-5]\d) [APap][mM]$/.test(inputField.value);
  15.  
  16. if (isValid) {
  17. document.getElementById("endTimeLabel").style.visibility = "hidden";
  18. }else {
  19. document.getElementById("endTimeLabel").style.visibility = "visible";
  20. }
  21.  
  22. return isValid;
  23. }
  24. </script>

那么我该怎么办呢? Google显示不同的验证方法,但不显示如何隐藏/显示标签

解决方法

您正在寻找显示
  1. document.getElementById("endTimeLabel").style.display = 'none';
  2. document.getElementById("endTimeLabel").style.display = 'block';

编辑:您也可以轻松地重用验证功能.

HTML:

  1. <span id="startDateLabel">Start date/time: </span>
  2. <input id="startDateStr" name="startDateStr" size="8" onchange="if (!formatDate(this,'USA')) {this.value = '';}" />
  3. <button id="startDateCalendarTrigger">...</button>
  4. <input id="startDateTime" type="text" size="8" name="startTime" value="12:00 AM" onchange="validateHHMM(this.value,'startTimeLabel');"/>
  5. <label id="startTimeLabel" class="errorMsg">Time must be entered in the format HH:MM AM/PM</label><br />
  6.  
  7. <span id="endDateLabel">End date/time: </span>
  8. <input id="endDateStr" name="endDateStr" size="8" onchange="if (!formatDate(this,'USA')) {this.value = '';}" />
  9. <button id="endDateCalendarTrigger">...</button>
  10.  
  11. <input id="endDateTime" type="text" size="8" name="endTime" value="12:00 AM" onchange="validateHHMM(this.value,'endTimeLabel');"/>
  12. <label id="endTimeLabel" class="errorMsg">Time must be entered in the format HH:MM AM/PM</label>

使用Javascript:

  1. function validateHHMM(value,message) {
  2. var isValid = /^(0?[1-9]|1[012])(:[0-5]\d) [APap][mM]$/.test(value);
  3.  
  4. if (isValid) {
  5. document.getElementById(message).style.display = "none";
  6. }else {
  7. document.getElementById(message).style.display= "inline";
  8. }
  9.  
  10. return isValid;
  11. }

Live DEMO

猜你在找的JavaScript相关文章