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

Referencing the length of a HTML number form element?

本文关键字：元素 表单 HTML 数字 引用      更新时间：2023-09-26

我有一个接受数字的表单，并且有一个特定的（电话号码或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()">

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

"getElementsByName"返回一个集合类型，您应该这样做来读取元素中的值。

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

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

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

document.getElementsByName（）函数在HTML5中贬值。请参阅w3school网站中的注释。请改用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>
相关文章：