Javascript 表单验证向后兼容早期版本的IE_Javascript_Html_Internet Explorer_Backwards Compatibility

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

javascript html internet-explorer

Javascript 表单验证向后兼容早期版本的IE,javascript,html,internet-explorer,backwards-compatibility,Javascript,Html,Internet Explorer,Backwards Compatibility,我知道，随着不同机器之间使用不同版本的IE，这是IT界持续关注的问题，但我想知道是否有人能建议我如何成功地使这段代码（在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

我知道，随着不同机器之间使用不同版本的IE，这是IT界持续关注的问题，但我想知道是否有人能建议我如何成功地使这段代码（在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;

函数验证（表单）{
var p=form.getElementsByTagName（“p”）；
var valid=true；
对于（变量i=0；i


}
+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）调用该方法
提前谢谢
 啊。。在这里做一些调查。似乎getElementsByClassName
和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


测试页
函数类（ele、cls）{
返回ele.className.match（新的RegExp（“（\\s | ^）”+cls+”（\\s |$））；
}
函数addClass（ele、cls）{
如果（！this.hasClass（ele，cls））ele.className+=“”+cls；
}
函数removeClass（ele、cls）{
if（HASSCLASS（ele、cls））{
var reg=new RegExp（“（\\s | ^）”+cls+”（\\s |$）；
ele.className=ele.className.replace（reg.）；
}
}
函数clearError（元素）{
}
函数验证（表单）{
变量i，l；
var输入；
//首先，让我们检查输入字段
var inputs=form.getElementsByTagName（“输入”）；
对于（i=0；i

琐事问题

什么不起作用？您收到了什么错误消息或行为？嗨，Jeremy，自从上传这个问题以来，上面的代码显示可以使用选择列表，但是当“text”类型的输入被标记包围时，验证就不会执行，表单也会提交。尚未显示任何错误消息。谢谢Hanks Jeremy，我不得不为我的代码稍微修改一下，我仍然使用包装器来设计元素的样式，尽管这不是最佳实践，但我现在太深了，无法改变结构！也许我稍后会有时间，但现在它在IE的两个版本中都能工作，这是我所能要求的，并且三个函数的分解使我的JavaScript更易于使用和重用，非常感谢，非常感谢。