2014-12-03 115 views
0

在此代碼上,此功能完美運行,它檢查所有瀏覽器中除0123和IE8之外的所有if條件及其狀態。當所有的登錄值輸入正確時,然後,在提交表單時,它工作在除IE,IE8以外的所有瀏覽器,爲什麼它不在IE8中工作?任何線索?javascript:表單不僅僅限於IE瀏覽器,而且它適用於所有其他瀏覽器

當所有輸入都正常時,將顯示以下內容。這在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 = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[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> 
+0

你在IE中得到什麼錯誤? – putvande 2014-12-03 12:07:59

+1

錯誤?請檢查控制檯並查看是否有任何錯誤。你需要證明你已經努力嘗試爲自己追蹤錯誤,而不是僅僅說 - 「這不起作用」。 – 2014-12-03 12:08:48

+0

@putvande,我沒有得到任何錯誤。我沒有任何問題。 – Sakthivel 2014-12-03 12:08:52

回答

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

同爲「loginForm.url」

0

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

相關問題