JS驗證（來自HTML輸入）問題

Question

我嘗試驗證在HTML 2個輸入字段輸入僅字符，如果不是我想顯示用戶massege，即時通訊使用HTML和JS：
HTML：

Player one name: <input type="text" id="firstname" maxlength="20"><br> 
    Player two name: <input type="text" id="secondname" maxlength="20"><br> 
    <input type="submit" value="Submit" id="submitBtn" onclick="insertNames();"/> 

JS：

function insertNames() 
{ 
    var nameOne = document.getElementById("firstname").value; //saves values 
    var nameTwo = document.getElementById("secondname").value; 
    var letters = /^[A-Za-z]+$/; 
    if(nameOne == "" || nameTwo == "" || !(nameOne.match(letters)) || !(nameTwo.match(letters))&& (nameOne == nameTwo)){ 
    if(nameOne == nameTwo) 
     alert("Please enter only characters.") 
     break; 
    }else 
     console.log("ok"); 
} 

當我嘗試輸入與數字的字符串未打印控制檯但同樣沒有顯示窗口報警，我在做什麼錯？
謝謝！

Answer 1

請更新您的功能，它有一些錯誤的條件

function insertNames() { 
    var nameOne = document.getElementById("firstname").value; //saves values 
    var nameTwo = document.getElementById("secondname").value; 
    var letters = /^[a-zA-Z]*$/; 
    if(nameOne == "" || nameTwo == "" || !(nameOne.match(letters)) || !(nameTwo.match(letters)) || (nameOne == nameTwo)){ 
     alert("Please enter only characters."); 
    } else { 
     console.log("ok"); 
    } 
} 

Answer 2

你的if語句改成這樣：

if(nameOne === "" || nameTwo === "" || !(nameOne.match(letters)) || !(nameTwo.match(letters))) { 
    alert("Please enter only characters.") 
} else { 
    console.log("ok"); 
} 

這將檢查你的名稱一和nameTwo變量中的字符。

然後在單獨的語句：

if(nameOne === nameTwo) { 
    alert("Player names are identical!"); 
} else { 
    console.log("ok"); 
} 

非常重要：請注意，我用三個等號，而不是兩個。這就是所謂的嚴格比較，也檢查類型。更多here

Answer 3

以下是我認爲你想要的。這將處理原始問題，處理名稱相同時，包含數字時的情況，最終在有效時回發到服務器，否則不會發布，並會相應地顯示警報。此外，看到當警報和控制檯輸出是適用的JavaScript評論...

 function insertNames() { 
 
      var nameOne = document.getElementById("firstname").value; //saves values 
 
      var nameTwo = document.getElementById("secondname").value; 
 
      var letters = /^[A-Za-z]+$/; 
 
      if (nameOne == nameTwo) { 
 
      alert('Entries are the same'); 
 
      return false; 
 
      } else 
 
      if (nameOne == "" || nameTwo == "" || !(nameOne.match(letters)) || !(nameTwo.match(letters))) { 
 
      alert("Please enter only characters."); 
 
      return false; 
 
      } else { 
 
      // You will not see this if the page will be submitted when successful (except in Fiddle)... 
 
      console.log("ok"); 
 
      } 
 
      return true; 
 
     } 
 

 
     // Used for debugging - to show page has loaded from server (not in Fiddle). 
 
     alert('Page loaded from server');

<form> 
 
    Player one name: 
 
    <input type="text" id="firstname" maxlength="20"> 
 
    <br>Player two name: 
 
    <input type="text" id="secondname" maxlength="20"> 
 
    <br> 
 
    <input type="submit" value="Submit" id="submitBtn" onclick="return insertNames();" /> 
 
</form>