0

我的<div>页面中有这样的：

 <div class="errordiv" style="display: none;">Username is empty</div>

我有一个输入字段和一个这样的按钮：

<input type="textbox" id="txt1" />
<input type="button" value="Submit" id="btn1" onclick="validate();" />

我试过这个，

function validate() {
    //alert('hi');
    var inptextbox = document.getElementById('txt1');
    //alert('level zero');
    var errorMsg = document.getElementsByClassName('errordiv').item();
    //alert('level ground');
    if (inptextbox.value == '') {
        //alert('hi2');
        errorMsg.style.display = 'block';
    } else {
        errorMsg.style.display = 'none';
    }
}

上面的js代码不起作用。我没有收到平地警报。我不知道缺少什么。

PS：我不想要 Jquery，因为我的页面对使用库文件有一些限制。

4

3 回答 3

1

您需要在验证中返回 false 以阻止表单提交，从而重新加载页面

编辑

从https://gist.github.com/2299607添加了 polyfill getElementsByClassName以支持 IE7

// Add a getElementsByClassName function if the browser doesn't have one
// Limitation: only works with one class name
// Copyright: Eike Send http://eike.se/nd
// License: MIT License
if (!document.getElementsByClassName) {
  document.getElementsByClassName = function(search) {
    var d = document, elements, pattern, i, results = [];
    if (d.querySelectorAll) { // IE8
      return d.querySelectorAll("." + search);
    }
    if (d.evaluate) { // IE6, IE7
      pattern = ".//*[contains(concat(' ', @class, ' '), ' " + search + " ')]";
      elements = d.evaluate(pattern, d, null, 0, null);
      while ((i = elements.iterateNext())) {
        results.push(i);
      }
    } else {
      elements = d.getElementsByTagName("*");
      pattern = new RegExp("(^|\\s)" + search + "(\\s|$)");
      for (i = 0; i < elements.length; i++) {
        if ( pattern.test(elements[i].className) ) {
          results.push(elements[i]);
        }
      }
    }
    return results;
  }
}

function validate() {
    //alert('hi');
    var inptextbox = document.getElementById('txt1');
    //alert('level zero');
    var errorMsg = document.getElementsByClassName('errordiv')[0];
    //alert('level ground');
    if (inptextbox.value == '') {
        //alert('hi2');
        errorMsg.style.display = 'block';
        return false;
    } else {
        errorMsg.style.display = 'none';
    }
}
于 2012-07-30T08:38:07.910 回答
0

您的代码在 chrome 中运行。这是演示。

document.getElementsByClassName不适用于某些旧浏览器，请查看此处。

于 2012-07-30T08:36:25.583 回答
0

首先，如果发生验证，您需要从函数返回一个值以停止返回页面，将您的 HTML 更改为：

<input type="button" value="Submit" id="btn1" onclick="return validate();" />

然后你的脚本：

function validate() {
    var inptextbox = document.getElementById('txt1');
    var errorMsg = document.getElementsByClassName('errordiv').item();

    if (inptextbox.value == '') {
        errorMsg.style.display = 'block';
        return false;
    }

    return true;
}
于 2012-07-30T08:40:01.410 回答