javascript:表单不仅被IE取代，而且，它适用于所有其他浏览器

javascript: Form is not getting submiited only IE, but, it works all other browsers

本文关键字：而且 适用于 浏览器 其他 取代 表单 IE javascript      更新时间：2023-09-26

在此代码上，它运行良好，它检查所有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>

在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;
}

与"loginForm.url"相同

您可以添加以下 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

相关文章：