Question

在这段代码上，这是完美的工作，它检查所有if条件，并且除了IE8和IE之外的所有浏览器都可以。当正确输入所有登录值时，那么，在提交表单时，除了IE，IE8之外，它还能运行所有浏览器，为什么它不能在IE8中运行？任何线索？

当所有输入都正常时，将显示以下内容。这在IE8中不起作用。有什么帮助吗？

<div id="FormSubmit" class="FormSubmit">
        <p>Form submitted successfully</p>
</div>

我不知道确切的问题在哪里。它适用于其他浏览器。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Example</title>

    <!--[if IE]>
    <link rel="stylesheet" href="IEStyles.css" type="text/css" media="screen" />
  <![endif]-->
      </head>

  <body>
    <div class="container">

    <div id="FormSubmit" class="FormSubmit">
    <p>Form submitted successfully</p>
    </div>
    <div class="LogIn">
    <form name="loginForm" method="post" onsubmit="javascript:return validateForm(this);"> 
    <input type="text" name="username" placeholder="Firstname Lastname"/>
    <span class="user-name">Name should not be empty</span>
    <input type="password" name="password" placeholder="Password"/>
    <input type="password" name="password1" placeholder="Confirm password"/>
    <span class="password">Password does not be match</span>
    <input type="email" name="email" placeholder="Email"/>
    <span class="email">Email is not valid</span>
    <input type="url" name="url" placeholder="Website"/>
    <span class="urlcontent">Invalid Website URL</span>
    <input name="submit" type="submit" value="Submit"/>
    </form></div> </div>    

<script type="text/javascript">    
var browserName;
window.onload = function(){
document.getElementsByName("username")[0].value="";
document.getElementsByName("password")[0].value="";
document.getElementsByName("password1")[0].value="";
document.getElementsByName("email")[0].value="";
document.getElementsByName("url")[0].value="";
document.getElementById("FormSubmit").style.display="none";
document.querySelector('span[class="user-name"]').style.display="none";
document.querySelector('span[class="password"]').style.display="none";
document.querySelector('span[class="urlcontent"]').style.display="none";
document.querySelector('span[class="email"]').style.display="none";
document.getElementsByName("username")[0].focus();
browserName = navigator.appName;
//alert(browserName);
} 

function validateEmail(email) { 
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
} 

function validateURL(curUrl){
alert("Hey, ULLLL"); 
  var re = /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/;
    return re.test(curUrl);
}

 function validateForm(form) {
  var returnValue=true;
  if(loginForm.username.value.length < 6){
  returnValue = false;
  document.querySelector('span[class="user-name"]').style.display="";
  loginForm.username.value = "";
  loginForm.username.focus();
  return returnValue;

}
 if (loginForm.password.value.length < 6){
  returnValue = false;
 alert("Your password must be at least\n6 characters long.\n Please try again.");
 loginForm.password.value = "";
 loginForm.password1.value = "";
 loginForm.password.focus();
 return returnValue;
}                  
if (loginForm.password.value != loginForm.password1.value){
returnValue = false;
document.querySelector('span[class="password"]').style.display="";
loginForm.password.value = "";
loginForm.password1.value = "";
loginForm.password1.focus();
return returnValue;
} 
if (loginForm.url.value.length == 0){
  returnValue = false;
 document.querySelector('span[class="urlcontent"]').style.display="";
 loginForm.url.focus();
 return returnValue;
}   

if ((loginForm.email.value.length != 0) && (browserName == "Microsoft Internet Explorer")){
  returnValue = false;
 var imEmail = validateEmail(loginForm.email.value);
 returnValue = imEmail;
 if (returnValue == false) document.querySelector('span[class="email"]').style.display="";

 loginForm.email.focus();
 return returnValue;

} 

if ((loginForm.url.value.length != 0) && (browserName == "Microsoft Internet Explorer")){
  //alert("Yessssssss!");
  returnValue = false;
 var imURL = validateURL(loginForm.url.value);
 returnValue = imURL;
 if (returnValue == false) document.querySelector('span[class="urlcontent"]').style.display="";
 loginForm.url.focus();//alert(returnValue);
 return returnValue;
}

if(returnValue!=false) {

document.getElementById("FormSubmit").style.display="";

return false;
   }
} 

</script>



  </body> 

</html>

Answer 1

在IE中，它会在这里返回：

if ((loginForm.email.value.length != 0) && (browserName == "Microsoft Internet Explorer")){
    returnValue = false;
    var imEmail = validateEmail(loginForm.email.value);
    returnValue = imEmail;
    if (returnValue == false) document.querySelector('span[class="email"]').style.display="";

    loginForm.email.focus();
    return returnValue;
    ^^^^^^^^^^^^^^^^^^^
}

其中if语句实际上是这样的：

if (returnValue == false) {document.querySelector('span[class="email"]').style.display="";}
                          ^                                                               ^
loginForm.email.focus();
return returnValue;

我猜你想要的是假的。你真的应该用大括号包装if语句，否则只有第一个语句在检查

下

if (returnValue == false) {
    document.querySelector('span[class="email"]').style.display="";
    loginForm.email.focus();
    return returnValue;
}

＆＃34; loginForm.url＆＃34;

Answer 2

您可以添加以下javascript：

(function () {
var
style = document.createStyleSheet(),
select = function (selector, maxCount) {
var
all = document.all,
l = all.length,
i,
resultSet = [];

style.addRule(selector, "foo:bar");
for (i = 0; i < l; i += 1) {
if (all[i].currentStyle.foo === "bar") {
resultSet.push(all[i]);
if (resultSet.length > maxCount) {
break;
}
}
}
style.removeRule(0);
return resultSet;

};

// be rly sure not to destroy a thing!
if (document.querySelectorAll || document.querySelector) {
return;
}

document.querySelectorAll = function (selector) {
return select(selector, Infinity);
};
document.querySelector = function (selector) {
return select(selector, 1)[0] || null;
};
}());

我尝试了它并且它有效。找到链接： https://gist.github.com/Fusselwurm/4673695

javascript：表单不是仅提交IE，但是，它适用于所有其他浏览器

2 个答案: