使用多量程誤差類單文本框

Question

我把表單驗證與跨度在我前面的例子 cannot display all warning message in form validation with span

但是當我使用超過1個驗證單個字段，然後我面臨的問題在跨顯示像

var x=document.forms["reg"]["email"].value; 
    var atpos=x.indexOf("@"); 
    var dotpos=x.lastIndexOf("."); 
if(x ==null || x=="") 
{ 
    document.getElementById("error2").innerHTML = "enter Email" 

    $var=false; 
} 
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) 
{ 
    document.getElementById("error3").innerHTML = "enter correct Email" 
    $var=false; 
} 

，並在表單字段是

   <td>Email:</td> 
       <td><input type="text" name="email" id="email" /><span id="email_error" style="color:red;"></span> 
       <span id="error2" style="color:red;"></span> 
       <span id="error3" style="color:red;"></span></td> 

如果我用這個代碼，並保留字段爲空則顯示像兩個錯誤 「輸入電子郵件輸入正確的電子郵件」。我怎樣才能解決這個問題？

Answer 1

因爲您的腳本在頁面加載後立即調用，並且沒有提供任何值，sp可以按預期運行，您可以在其周圍放置一個函數，例如調用formonsubmit或內聯事件處理函數如電子郵件input元素上的onblur。

我不知道什麼$var是，但它是未申報

試試這個

<input type="text" name="email" id="email" onblur="checkEmailField()"/> 

和下面的函數，這不會顯示「輸入電子郵件」，除非用戶專注於電子郵件字段，然後移動遠離田野而不進入任何東西。

function checkEmailField(){ 


var x=document.forms["reg"]["email"].value; 
    var atpos=x.indexOf("@"); 
    var dotpos=x.lastIndexOf("."); 
if(x ==null || x=="") 
{ 
    document.getElementById("error2").innerHTML = "enter Email" 
document.getElementById("error3").innerHTML = ""; 
    $var=false; 
}else 

if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length && x != "" && x!=null) 
{ 
document.getElementById("error2").innerHTML = ""; 
document.getElementById("error3").innerHTML = "enter correct Email" 

$var=false; 
} 
}