Question

我有一个需要数字的表单，并且有一个特定的（电话号码或phNo）表单元素，我只想接受7位数字（不再需要，不少）。使用Javascript的想法是：

如果元素长度不等于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()">

Answer 1

＆＃34; getElementsByName＆＃34;返回一个集合类型，您应该这样做以从元素中读取值。

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

此行将返回[object HTMLInputElement]，如果您想要用户在输入中输入的值，则需要使用phNo.value。

与此问题并不真正相关，但<input type="number" name="phNo" max="7">此处max属性仅表示该输入中可能的最高数量为7.使用支持html5输入的浏览器，它会给我如果我尝试输入任何电话号码，则无效突出显示。我会将它更改为一个简单的文本字段并使用maxlength属性，这可能是你想要的;

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

Answer 3

如果您决定将其保留为数字输入，则无需将其转换为字符串。电话号码不能以0开头，因此最小的数字将是1000000.如果您的输入最大值为7，那么您可以检查该值是否大于该值。

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

Answer 4

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>

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

4 个答案: