引用HTML數字表單元素的長度？

我有一個需要數字的表單，並且有一個特定的（電話號碼，或phNo）表單元素，我只想接受7位數的長度（不多也不少）。使用JavaScript的理念是：引用HTML數字表單元素的長度？

如果元素長度不等於7：true其他false

這裏是我的代碼：

var phNo = document.getElementsByName('phNo'); //here I try to get 
 
     the form value in the form of an object. This is where I think I am going wrong 
 

 
     var phNoString = phNo.toString(); //Not to sure if I need this line or not, read somewhere that .length only works on a string 
 
     
 
     if(phNoString.length != 7) { 
 
      //Do something for false 
 
      return; 
 
     } else { 
 
      //Do something for true 
 
     }

<form id="myForm" action="form_action.asp"> 
 
      First name: <input type="text" name="fName"><br> 
 
      Last name: <input type="text" name="lName"><br> 
 
      Phone Number: <input type="number" name="phNo" max="7"><br> 
 
      Credit Card Number: <input type="number" name="cardNo"><br> 
 
      </form> 
 
      <input id="submit" type="button"value="Submit"onClick="detailsSubmit()">

來源

2016-07-26 Draxy

你想'.value'，沒有'的ToString（）'，就像其他任何輸入。 – Bergi

'submit'輸入應該在你的'form'裏面。你不能指定你遇到什麼問題.. – choz

var phNoString = phNo.toString();

這條線將返回[object HTMLInputElement]，你需要使用phNo.value，如果你希望用戶輸入中鍵入的值。

與問題沒有關係，但<input type="number" name="phNo" max="7">這裏的max屬性僅意味着在該輸入中可能的最大數字是7.使用支持html5輸入的瀏覽器，如果我嘗試輸入任何電話號碼，它會給我一個無效的亮點。我會將其更改爲簡單的文本字段並使用maxlength屬性，這可能是您的意圖;

<input type="text" name="phNo" maxlength="7">

來源

2016-07-26 02:05:30 gedc

哇，看起來像maxlength修復它沒有JS需要，因爲你只能輸入7的長度。奇怪的是，我測試了maxlength標記（很多）。我認爲這是一個HTML5的東西，因爲它不適合我。現在雖然！ – Draxy

數字輸入是html5的新增功能，並且令人驚訝的是不支持maxlength，這可能就是爲什麼你無法使用它。無論如何，我不建議只依賴maxlength進行驗證，就像使用佔位符或輸入掩碼一樣，它們很有幫助，但用戶仍然可以找到解決辦法。 – gedc

「getElementsByName」返回集合類型，你應該這樣做來讀取元素的值。

var phNoString = document.getElementsByName('phNo')[0].value; 
if(phNoString.toString().length != 7) { 
    //Do something for false 
    return; 
} else { 
    //Do something for true 
}

來源

2016-07-26 01:45:40 here4learn

如果您確實決定將其作爲數字輸入，則不需要將其轉換爲字符串。電話號碼不能以0開頭，所以最小的數字是1000000.如果您的輸入最大值爲7，那麼您可以檢查該值是否大於該值。

var phNoString = document.getElementsByName('phNo')[0].value; 
if(var phNoString > 1000000){ 
// truthy 
}else{ 
// falsey 
}

來源

2016-07-26 02:14:18

聰明！沒有想到那樣。 – Draxy

document.getElementsByName（）函數在HTML5中折舊。請參閱w3school site中的註釋。改爲使用document.getElementById()，並將ID標籤添加到您的手機輸入控件。

另請使用input type="tel"作爲您的電話號碼。這樣，瀏覽器，尤其是移動設備上的瀏覽器就知道如何在屏幕上正確顯示輸入值。

最後，請注意使用正則表達式對輸入的電話號碼進行驗證檢查。另外，重要的是要注意，HTML5正則表達式驗證在JavaScript函數執行後運行。下面的代碼片段，您可以吸收新的開發者的牙齒分爲：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title of the document</title> 
</head> 

<body> 
    <form> 
     Phone Number (format: xxx-xxx-xxxx):: <input type="tel" id="phNo" name="phNo" pattern="^\d{3}-\d{3}-\d{4}$"/><br> 
     <button type="submit" name="submit" onclick="checkphonelength()">submit</button> 
    </form> 
    <script type="text/javascript"> 
     function checkphonelength(){ 
      var phNoStringLength = document.getElementById('phNo').value.length; 
      if(phNoStringLength === 12) { 
       alert("true"); 
       return true; 
      } 
      alert(false); 
      return false; 
     } 
    </script> 
</body> 
</html>

來源

2016-07-26 02:44:38

引用HTML數字表單元素的長度？

回答

相關問題