2015-10-17 51 views
1

我尝试验证在HTML 2个输入字段输入仅字符,如果不是我想显示用户massege,即时通讯使用HTML和JS:
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"); 
} 

当我尝试输入与数字的字符串未打印控制台但同样没有显示窗口报警,我在做什么错?
谢谢!

+0

不到'

这些元素'?如果是这样,当功能完成时,''可能会执行其正常行为,导航到另一个页面或当前页面的新副本。一些控制台将默认清除登录导航。确保你已经设置好了保留它们。 –

+0

是的,我希望它显示警报或日志(哪些是真的..),但它不显示警报, @JonathanLonowski是的谢谢,我删除了休息;但它仍然不显示警报 – Coder123

+0

@ Coder123请检查下面的答案它会做的伎俩。 –

回答

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

0

以下是我认为你想要的。这将处理原始问题,处理名称相同时,包含数字时的情况,最终在有效时回发到服务器,否则不会发布,并会相应地显示警报。此外,看到当警报和控制台输出是适用的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>