Question

我知道这是IT中一直在关注的问题，不同版本的IE在不同的机器之间使用，但我想知道是否有人可以告诉我如何成功制作此代码（适用于所有我在IE 10，FireFox，Chrome等中的表单验证都适用于早期版本的IE。我正在测试它的版本是IE7。

function validate(form){
var p = form.getElementsByTagName("p");
var valid = true;
for(var i = 0; i < p.length; i++){
    var inputs = p[i].getElementsByTagName("*");
    if(p[i].className == "required" || p[i].className == "required error"){
        for(var n = 0; n < inputs.length; n++){
            switch(inputs[n].tagName){
            case "INPUT":
                if(inputs[n].value.trim() == "" || inputs[n].value == null){
                    if(+navigator.sayswho[1] < 9){
                        //JavaScript for IE version 8 and below
                    }
                    else{
                        inputs[n].className = inputs[n].className.replace( /(?:^|\s)error(?!\S)/ , "" );
                        inputs[n].className = inputs[n].className+" error";
                        p[i].className = "required error";
                    }
                    valid = false;
                }
                break;
            case "SELECT":
                if(inputs[n].options[inputs[n].selectedIndex].value == 0 || select.value == null){
                    if(+navigator.sayswho[1] < 9){
                        //JavaScript for IE version 8 and below
                    }
                    else{
                        inputs[n].className = inputs[n].className.replace( /(?:^|\s)error(?!\S)/ , "" );
                        inputs[n].className = inputs[n].className+" error";
                        p[i].className = "required error";
                    }
                    valid = false;
                }
                break;
            }
        }
    }
}
if(valid){
    var elements = form.getElementsByTagName("*");
    for(var i = 0; i < elements.length; i++){
        switch(elements[i].type){
        case "submit":
            elements[i].disabled = true;
            break;
        case "reset":
            elements[i].disabled = true;
            break;
        case "button":
            elements[i].disabled = true;
            break;
        }
    }
    return true;
}
return false;

}

+ navigator.sayswho [1]是我在这里找到的另一个问题的值，它返回一个表示浏览器版本的int（在本例中为7）

表单字段的示例是：

        <p class="required">
        <span>Required Field</span>
        <input type="text" id="username" name="username" class="logon_field" onfocus="clearError(this)" placeholder="Username" autofocus />
    </p>

使用表单的onsubmit属性中的validate（this）调用该方法提前谢谢！

Answer 1

啊..做一些看这里的SO。似乎getElementsByClassName和IE7存在一些问题。

getElementsByName in IE7

我通过将事物分成几个不同的部分来解决它，如下所示。

免费奖金，顺便说一句。 'addClass''removeClass'和'hasClass'

最好将所需的属性（或类）放在输入字段本身上，而不是放在包装器上......虽然你可以设置包装器的类来显示字段是错误的。

<doctype html>
<html>
<head>
<title>
Test  page
</title>

<script>

function hasClass(ele,cls) {
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

function addClass(ele,cls) {
    if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}

function removeClass(ele,cls) {
    if (hasClass(ele,cls)) {
        var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
        ele.className=ele.className.replace(reg,' ');
    }
}

function clearError(element) {
}

function validate(form) {
  var i, l;
  var input;
  // First, let's check the input fields
  var inputs = form.getElementsByTagName("input");
  for (i = 0; i < inputs.length; i++) {
    input = inputs[i];

    // Skip stuff we don't want.
    // You'll want password this list yet.
    if (input.type !== "text") {
      continue;
    }

    if (input.required || hasClass(input, "required")) {
    if (input.value == "") {
      alert(input.name + " is required");
      }
    }


  }
}

</script>


</head>
<body>
<form action="#" onsubmit="validate(this); return false">
  <p>
  <label for="username">Required Field</label>
  <input type="text" class="required" id="username" name="username" class="logon_field" onfocus="clearError(this)" placeholder="Username" autofocus />
  </p>

  <p>
  <label for="trivia">Trivia Question</trivia>
  <input type="text" id="trivia" name="trivia" class="" onfocus="clearError(this)" placeholder="Username" autofocus />
  </p>

  <input type="submit">
</form>

</body>
</html

表单验证向后兼容早期版本的IE

1 个答案: