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

【问题标题】：Form validation backwards compatible with earlier versions of IE表单验证向后兼容早期版本的 IE
【发布时间】：2013-04-18 12:24:02
【问题描述】：

我知道这几天在 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) 调用该方法提前致谢！

【问题讨论】：

什么不起作用？您收到什么错误消息或行为？
嗨，Jeremy，自从上传这个问题后，上面的代码已经显示出可以与选择列表一起使用，但是当“text”类型的输入被
标记时，验证只是简单的不执行并且表单无论如何都会提交。尚未显示任何错误消息。谢谢

标签： javascript html internet-explorer backwards-compatibility

【解决方案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

【讨论】：

感谢 Jeremy，我不得不为我的代码稍微修改它，我仍然使用
包装器来设置元素的样式，尽管它不是最佳实践，但我太深了，无法更改结构现在！也许我稍后会有时间，但现在它可以在两个版本的 IE 中工作，这是我所能要求的，并且分解为三个函数使我的 JavaScript 更容易使用和重用，可以'谢谢你，非常感谢。