引用HTML数字表单元素的长度？

Question

I have a form that takes numbers, and there is a specific (Phone number, or phNo ) form element that I want to only accept 7 digits in length (no more, no less). 我有一个接受数字的表单，并且有一个特定的 （电话号码或phNo ）表单元素，我只希望接受7位数字的长度（不多也不少）。 Using Javascript the Idea is: 使用Javascript的想法是：

If element length not equal to 7: true else false 如果元素长度不等于7： true否则为false

Here is my code: 这是我的代码：

 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()">

Answer 1

"getElementsByName" returns a collection type, you should be doing like this to read the value from the element. “ getElementsByName”返回一个集合类型，您应该这样做以从元素中读取值。

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

Answer 2

var phNoString = phNo.toString();

This line will return [object HTMLInputElement] , you need to use phNo.value if you want the value the user typed inside the input. 该行将返回[object HTMLInputElement] ，如果要用户在输入中键入的值，则需要使用phNo.value 。

Not really related to the problem, but <input type="number" name="phNo" max="7"> here the max attribute only means the highest number possible in that input is 7. Using a browser that supports html5 inputs it's giving me an invalid highlight if I try to enter any phone number. 并非与问题真正相关，但是<input type="number" name="phNo" max="7">在这里， max属性仅表示该输入中可能的最大数字为7。使用支持html5输入的浏览器，如果我尝试输入任何电话号码，请给我一个无效的突出显示。 I would change it to a simple text field and use the maxlength attribute, which is probably what you intended; 我将其更改为一个简单的文本字段，并使用maxlength属性，这可能就是您想要的；

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

Answer 3

If you did decide to leave it as a number input, you don't need to convert it to a string. 如果您确实决定将其保留为数字输入，则无需将其转换为字符串。 Phone Numbers can't start with 0, so the smallest number would be 1000000. If your input has a max of 7, then you can check that the value is greater than that. 电话号码不能以0开头，因此最小的号码应为1000000。如果输入的最大值为7，则可以检查该值是否大于该值。

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

Answer 4

The document.getElementsByName() function is depreciated in HTML5. HTML5中不推荐使用document.getElementsByName（）函数。 See note in w3school site . 请参阅w3school网站中的注释。 Use document.getElementById() instead and add an ID tag to your phone input control. 请改用document.getElementById()并将ID标记添加到电话输入控件中。

Also use input type="tel" for your phone numbers. 还要使用input type="tel"作为您的电话号码。 That way the browsers, especially on mobile devices, know how to correctly display the inputted value on the screen. 这样，浏览器（尤其是在移动设备上）就知道如何在屏幕上正确显示输入的值。

Finally, note the use of regular expressions to do a validation check on the inputted phone number. 最后，请注意使用正则表达式对输入的电话号码进行验证检查。 Also, it is important to note , the HTML5 regex validation runs after the JavaScript function executes. 另外，请务必注意 ，HTML5 regex验证将在JavaScript函数执行后运行。 Below is a code snippet that you can sink your new developer teeth into: 下面是一个代码片段，您可以将新的开发人员介绍给他们：

<!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>

引用HTML数字表单元素的长度？

问题描述

4 个解决方案

解决方案1
0 2016-07-26 01:45:40

解决方案2
0 已采纳 2016-07-26 02:05:30

解决方案3
0 2016-07-26 02:14:18

解决方案4
0 2016-07-26 02:44:38

引用HTML数字表单元素的长度？

问题描述

4 个解决方案

解决方案1 0 2016-07-26 01:45:40

解决方案2 0 已采纳 2016-07-26 02:05:30

解决方案3 0 2016-07-26 02:14:18

解决方案4 0 2016-07-26 02:44:38

解决方案1
0 2016-07-26 01:45:40

解决方案2
0 已采纳 2016-07-26 02:05:30

解决方案3
0 2016-07-26 02:14:18

解决方案4
0 2016-07-26 02:44:38