基本的JavaScript驗證不起作用

我正在嘗試使用JavaScript驗證做出一個簡單的表單。它有四個字段：標題，電子郵件地址，評級和評論。據我所知，我在這裏的代碼應該工作來驗證表單，我不應該被允許提交它，但每當我按下提交按鈕，沒有提示出現，瀏覽器提交表單。有人能讓我知道我哪裏錯了嗎？我會想象有一個簡單的解決方案或我忘記的東西，但我很新，所以很抱歉，如果它是非常明顯的東西。基本的JavaScript驗證不起作用

的HTML和JavaScript代碼是：

 <html> 

     <head> 

     <script type="text/javascript"> 
     function validateForm() 
     {   
     var e=document.forms["review"]["Title"].value; 
     var s=document.forms["review"]["Email"].value; 
     var t=document.forms["review"]["Rating"].value; 
     var c=document.forms["review"]["Comments"].value; 

     var atsym=s.indexOf("@"); 
     var dotsym=s.lastindexOf("."); 

     if (e==null || e=="") 
    { 
    document.getElementById("valAlert").innerHTML="Please Enter a Title"; 
    return false; 
    } 

     else if (s==null || s=="" || atsym<1 || dotsym<atsym+2 || dotsym+2>=s.length) 
    { 
    document.getElementById("valAlert").innerHTML="That is not a valid email address!";   
    return false; 
    } 

     else if (t=="0") 
    { 
    document.getElementById("valAlert").innerHTML="You must enter a rating"; 
    return false; 
    } 

     else if (c==null || c=="") 
    { 
    document.getElementById("valAlert").innerHTML="You need to enter some kind of comment."; 
    return false; 
    } 

     else 
    { 
    alert ("Your review of " + t + "has been submitted!"); 
    } 
     } 

    </script> 
    </head> 

    <body> 
    <div id="valAlert"></div> 
     <form name="review" onsubmit="return validateForm()"> 
     <fieldset> 
      Enter Title: 
      <input type="text" name="Title"> 
      </br> 
      </br> 
      Enter Email Address: 
      <input type="text" name="Email"> 
      </br> 
      </br> 
      Please Enter Your Rating: 
      <select name="Rating"> 
      <option value="0">(Please select a rating)</option> 
      <option value="1S">1 Star</option> 
      <option value="2S">2 Stars</option> 
      <option value="3S">3 Stars</option> 
      <option value="4S">4 Stars</option> 
      <option value="5S">5 Stars!</option> 
      </select> 
      </br> 
      </br> 
      <textarea name="Comments" rows="8" colspan="40">Comments:</textarea> 
      </fieldset> 
      </br> 
      </br> 
     <fieldset> 
     <input class="button" type="submit" value="Submit"/> 
     </fieldset> 
</form> 

</body>

來源

2014-05-16 denisq91

您是否檢查了控制檯的錯誤？ – Ryan

是的，我還沒有發現任何錯誤。 – denisq91

請做業務就像下面

var dotsym=s.lastindexOf(".");

添加空校驗變量的'之前進行空值檢查請檢查下面的功能命名約定

obj.lastindexOf(); TO obj.lastIndexOf(".");

來源

2014-05-16 14:08:54

請不要。文本字段的「值」不能爲空。不過，你對套管說得對。 – Ryan

-1

我不同意你的意見。您正在獲取控制檯錯誤。特別是，當你嘗試在s上運行解析器並且s爲空時，它就會出錯。您需要將邏輯移動到if語句在驗證它有一個值：

else if (s == null || s == "") { 
    document.getElementById("valAlert").innerHTML = "Please enter an email address"; 
    return false; 
} 
else if (s.indexOf("@") < 1 || s.lastindexOf(".") < s.indexOf("@")+ 2 || s.lastindexOf(".")+ 2 >= s.length) { 
    document.getElementById("valAlert").innerHTML = "This is not a valid email address!"; 
    return false; 
}

這裏是一個Fiddle

來源

2014-05-16 14:09:37 Bic

從什麼時候'indexOf'不能在空字符串上工作？另外，試試你的電子郵件地址'foo @'。 – Ryan

該字段的值未定義，不是空字符串。它拋出一個控制檯錯誤。如果按照小提琴中所示重新排列，它將起作用。 – Bic

's'是電子郵件字段。它不能具有'null'的值（或者對於這個問題''undefined'）。 – Ryan

你說沒有任何錯誤，但是你可能只是他們失蹤當表單提交併且控制檯被清除時。

如果您使用Chrome /鉻，您可以啓用打破中的開發工具的源標籤的例外（圖標在最正確的應該是紫色或藍色）：

Screenshot of Chrome Developer Tools

在Firefox中，它在調試選項菜單：

Screenshot of Firefox Developer Tools

The menu

正如@Rajesh所說，你在lastindexOf上的套管是錯誤的;它應該是lastIndexOf。

現在，讓我們來解決一切了，開始與格式：

<html> 
    <head> 
     <script type="text/javascript"> 
     function validateForm() 
     { 
      var e = document.forms["review"]["Title"].value; 
      var s = document.forms["review"]["Email"].value; 
      var t = document.forms["review"]["Rating"].value; 
      var c = document.forms["review"]["Comments"].value; 

      var atsym = s.indexOf("@"); 
      var dotsym = s.lastIndexOf("."); 

      if (e == null || e == "") 
      { 
       document.getElementById("valAlert").innerHTML = "Please Enter a Title"; 
       return false; 
      } 

      else if (s == null || s == "" || atsym < 1 || dotsym < atsym + 2 || dotsym + 2 >= s.length) 
      { 
       document.getElementById("valAlert").innerHTML = "That is not a valid email address!"; 
       return false; 
      } 

      else if (t == "0") 
      { 
       document.getElementById("valAlert").innerHTML = "You must enter a rating"; 
       return false; 
      } 

      else if (c == null || c == "") 
      { 
       document.getElementById("valAlert").innerHTML = "You need to enter some kind of comment."; 
       return false; 
      } 

      else 
      { 
       alert("Your review of " + t + " has been submitted!"); 
      } 
     } 
     </script> 
    </head> 

    <body> 
     <div id="valAlert"></div> 

     <form name="review" onsubmit="return validateForm()"> 
      <fieldset> 
       Enter Title: 
       <input type="text" name="Title" /> 
       </br> 
       </br> 

       Enter Email Address: 
       <input type="text" name="Email" /> 
       </br> 
       </br> 

       Please Enter Your Rating: 
       <select name="Rating"> 
        <option value="0">(Please select a rating)</option> 
        <option value="1S">1 Star</option> 
        <option value="2S">2 Stars</option> 
        <option value="3S">3 Stars</option> 
        <option value="4S">4 Stars</option> 
        <option value="5S">5 Stars!</option> 
       </select> 
       </br> 
       </br> 

       <textarea name="Comments" rows="8" colspan="40">Comments:</textarea> 
      </fieldset> 

      </br> 
      </br> 

      <fieldset> 
       <input class="button" type="submit" value="Submit" /> 
      </fieldset> 
     </form> 
    </body>

你缺少DTD和關閉</html>，所以添加這些：

<!DOCTYPE html> 

<html> 
    … 
</html>

接下來，</br>沒有按」不存在。這是<br />。

<form name="review" onsubmit="return validateForm()"> 
    <fieldset> 
     Enter Title: 
     <input type="text" name="Title" /> 
     <br /> 
     <br /> 

     Enter Email Address: 
     <input type="text" name="Email" /> 
     <br /> 
     <br /> 

     Please Enter Your Rating: 
     <select name="Rating"> 
      <option value="0">(Please select a rating)</option> 
      <option value="1S">1 Star</option> 
      <option value="2S">2 Stars</option> 
      <option value="3S">3 Stars</option> 
      <option value="4S">4 Stars</option> 
      <option value="5S">5 Stars!</option> 
     </select> 
     <br /> 
     <br /> 

     <textarea name="Comments" rows="8" colspan="40">Comments:</textarea> 
    </fieldset> 

    <br /> 
    <br /> 

    <fieldset> 
     <input class="button" type="submit" value="Submit" /> 
    </fieldset> 
</form>

這裏：

var e = document.forms["review"]["Title"].value; 
var s = document.forms["review"]["Email"].value; 
var t = document.forms["review"]["Rating"].value; 
var c = document.forms["review"]["Comments"].value;

的屬性是有效的JavaScript標識符，這樣你就可以將它們與點語法寫：

var e = document.forms.review.Title.value; 
var s = document.forms.review.Email.value; 
var t = document.forms.review.Rating.value; 
var c = document.forms.review.Comments.value;

你或許應該給他們更明確的名字，太;我想你用錯了一個在這最後alert，這將幫助：

var title = document.forms.review.Title.value; 
var email = document.forms.review.Email.value; 
var rating = document.forms.review.Rating.value; 
var comments = document.forms.review.Comments.value;

接下來，你不需要else■當你return從if情況下，荷蘭國際集團無論是什麼，這樣你就可以放下這些。文本輸入的value永遠不可能是null，因此請停止檢查這些內容。它還可以節省一些打字（或複印），以保持valAlert作爲一個變量。

var atsym = email.indexOf("@"); 
var dotsym = email.lastindexOf("."); 
var valAlert = document.getElementById("valAlert"); 

if (title === "") { 
    valAlert.innerHTML = "Please Enter a Title"; 
    return false; 
} 

if (atsym < 1 || dotsym < atsym + 2 || dotsym + 2 >= s.length) { 
    valAlert.innerHTML = "That is not a valid email address!"; 
    return false; 
} 

if (rating == "0") { 
    valAlert.innerHTML = "You must enter a rating"; 
    return false; 
} 

if (comments == "") { 
    valAlert.innerHTML = "You need to enter some kind of comment."; 
    return false; 
} 

alert("Your review of " + title + " has been submitted!");

Voilà！可是等等;還有更多。 ~~生活中最好的東西~~網站開發不需要JavaScript，這也不例外。

<!DOCTYPE html> 

<html> 
    <head> 
     <title>HTML5 validation</title> 
    </head> 

    <body> 
     <form> 
      <fieldset> 
       <label> 
        Enter title: 

        <input type="text" name="title" required /> 
       </label> 

       <label> 
        Enter e-mail address: 

        <input type="email" name="email" required /> 
       </label> 

       <label>  
        Please enter your rating: 
        <select name="rating" required> 
         <option>(Please select a rating)</option> 
         <option value="1S">1 Star</option> 
         <option value="2S">2 Stars</option> 
         <option value="3S">3 Stars</option> 
         <option value="4S">4 Stars</option> 
         <option value="5S">5 Stars!</option> 
        </select> 
       </label> 

       <textarea name="comments" rows="8" cols="40" placeholder="Comments" required></textarea> 
      </fieldset> 

      <fieldset> 
       <button class="button">Submit</button> 
      </fieldset> 
     </form> 
    </body> 
</html>

來源

2014-05-16 14:22:35 Ryan

非常感謝您的回答，當我修復'lastIndexOf'語法時，驗證運行正常。 – denisq91

@ denisq91：那麼你不應該接受Rajesh的回答嗎？ Bic是錯的。 – Ryan

@ denisq91：另外，請仔細看看這個結尾;如果這不僅僅是JavaScript練習，你應該真的使用[HTML5的表單驗證功能]（https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation）。 – Ryan

基本的JavaScript驗證不起作用

回答

相關問題