HTML番号フォーム要素の長さを参照していますか？

私は数字をとるフォームを持っています。の具体的な（電話番号、またはphNo）のフォーム要素があります。長さは7桁しか受け入れません。 JavaScriptを使用してアイデアがある：true他falseHTML番号フォーム要素の長さを参照していますか？

ここに私のコードです：：7への要素の長さと等しくない場合

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

任意の入力と同様に、 '.toString（）'ではなく '.value'を使用します。 – 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

うわー、最大長は7の長さしか入力できないので、JSを必要とせずに修正しました。奇妙なことに、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番号フォーム要素の長さを参照していますか？

答えて

関連する問題