Javascript 检查长度，然后检查值是否仅为数值

我正在尝试对3个文本框（电话号码）进行字段验证。理想情况下，我只想在三个框中的任何一个包含值的情况下进行验证。否则，不应生成任何错误。此外，在文本框中放置任何值的情况下，我希望确保这些值仅为数字

场景如下所示

1.用户不在任何框中输入任何内容：不发生任何事情
2.用户在框1中输入“12”，在框2中输入“222”，在框3中输入“4444”：这将导致一个不完整的数字。验证。
3.用户输入有效长度的值。例如：“11j”“222”“1222”：这不是有效值，因为它包含一个字母。验证

我目前的解决方案有些效果。但它不允许用户将任何字段留空（场景1无效）。我怎样才能解决这个问题

验证：

$("#editArea,#editPrefix,#editSuffix").blur(function () {
        var regex = /^[0-9]+$/;
        var phone = $("#editArea").val() + $("#editSuffix").val() + $("#editPrefix").val();
        var area=$("#editArea").val();
        var suffix=$("#editSuffix").val();
        var prefix=$("#editPrefix").val();
        if (phone.length > 0 && phone.length < 10||!regex.test(area)==true||!regex.test(suffix)==true||!regex.test(prefix)==true) {
            $("#editPhoneError").html('<font color="#cc0000">The number must be a numeric 10 digit value </font>');
            $("#editArea").addClass("validation");
            $("#editPrefix").addClass("validation");
            $("#editSuffix").addClass("validation");
        }
        else {
            $("#editPhoneError").html('<font color="#cc0000"></font>');
            $("#editArea").removeClass("validation");
            $("#editPrefix").removeClass("validation");
            $("#editSuffix").removeClass("validation");
        }
        $("#btnSave").prop("disabled", ($(":input.validation").length > 0));
    });   
}

$（“#editArea，#editPrefix，#editSuffix”）.blur（函数（）{
var regex=/^[0-9]+$/；
var phone=$（“#editArea”）.val（）+$（“#editSuffix”）.val（）+$（“#editPrefix”）.val（）；
var区域=$（“#编辑区域”）.val（）；
var后缀=$（“#editSuffix”）.val（）；
var prefix=$（“#编辑前缀”）.val（）；
如果（phone.length>0&&phone.length<10 | | |！正则表达式测试（区域）==true | |！正则表达式测试（后缀）==true | |！正则表达式测试（前缀）==true）{
$（“#editPhoneError”）.html（'数字必须是10位数字'）；
$（“#编辑区”）.addClass（“验证”）；
$（“#editPrefix”）.addClass（“验证”）；
$（“#editSuffix”）.addClass（“验证”）；
}
否则{
$（“#editPhoneError”）.html（“”）；
$（“#编辑区”）.removeClass（“验证”）；
$（“#editPrefix”）.removeClass（“验证”）；
$（“#editSuffix”）.removeClass（“验证”）；
}
$（“#btnSave”）.prop（“禁用”），（$（“：input.validation”）.length>0）；
});   
}

标记：

 <div>
 <input id="editArea" maxlength="3" onkeyup="tabout(this,'editPrefix')" name="editArea" style="float:left; width:70px;" type="text" value="@Model.Pharmacy.Area" depends />
 </div>
 <div>
 <input id="editPrefix" maxlength="3" onkeyup="tabout(this,'editSuffix')" name="editPrefix" style="float:left; width:70px;" type="text" value="@Model.Pharmacy.Prefix" depends />
  </div>
  <div>
  <input id="editSuffix" maxlength="4" onkeyup="tabout(this,'editPrefix')" name="editSuffix" style="float:left; width:70px;" type="text" value="@Model.Pharmacy.Suffix" depends />
  </div>
  <span style="margin-left:-208px; margin-top:50px;" id="editPhoneError" value="0"></span>
  </div>

 <div>
 <input class="phone-validation" maxlength="3" onkeyup="tabout(this,'editPrefix')" name="editArea" style="float:left; width:70px;" type="text" value="@Model.Pharmacy.Area" depends />
 </div>
 <div>
 <input class="phone-validation" maxlength="3" onkeyup="tabout(this,'editSuffix')" name="editPrefix" style="float:left; width:70px;" type="text" value="@Model.Pharmacy.Prefix" depends />
  </div>
  <div>
  <input class="phone-validation" maxlength="4" onkeyup="tabout(this,'editPrefix')" name="editSuffix" style="float:left; width:70px;" type="text" value="@Model.Pharmacy.Suffix" depends />
  </div>
  <span style="margin-left:-208px; margin-top:50px;" id="editPhoneError" value="0"></span>
  </div>

只需更换此：

if (phone.length > 0 && phone.length < 10||!regex.test(area)==true
       ||!regex.test(suffix)==true||!regex.test(prefix)==true) {

.phone{宽度：70px；}
.错误{颜色：#c00；可见性：隐藏}
.validation{边框：3px实心#e00}
.show{可见性：可见}

该数字必须是10位数字值
保存

只需替换以下内容：

if (phone.length > 0 && phone.length < 10||!regex.test(area)==true
       ||!regex.test(suffix)==true||!regex.test(prefix)==true) {

.phone{宽度：70px；}
.错误{颜色：#c00；可见性：隐藏}
.validation{边框：3px实心#e00}
.show{可见性：可见}

该数字必须是10位数字值
保存

您可以执行以下操作：

JS

$（“.phone validation”）.blur（函数（）{
var regex=/^[0-9]+$/；
var phone=此值；
if（phone.length>0&&phone.length0）；
});   
}

标记：

 <div>
 <input id="editArea" maxlength="3" onkeyup="tabout(this,'editPrefix')" name="editArea" style="float:left; width:70px;" type="text" value="@Model.Pharmacy.Area" depends />
 </div>
 <div>
 <input id="editPrefix" maxlength="3" onkeyup="tabout(this,'editSuffix')" name="editPrefix" style="float:left; width:70px;" type="text" value="@Model.Pharmacy.Prefix" depends />
  </div>
  <div>
  <input id="editSuffix" maxlength="4" onkeyup="tabout(this,'editPrefix')" name="editSuffix" style="float:left; width:70px;" type="text" value="@Model.Pharmacy.Suffix" depends />
  </div>
  <span style="margin-left:-208px; margin-top:50px;" id="editPhoneError" value="0"></span>
  </div>

 <div>
 <input class="phone-validation" maxlength="3" onkeyup="tabout(this,'editPrefix')" name="editArea" style="float:left; width:70px;" type="text" value="@Model.Pharmacy.Area" depends />
 </div>
 <div>
 <input class="phone-validation" maxlength="3" onkeyup="tabout(this,'editSuffix')" name="editPrefix" style="float:left; width:70px;" type="text" value="@Model.Pharmacy.Prefix" depends />
  </div>
  <div>
  <input class="phone-validation" maxlength="4" onkeyup="tabout(this,'editPrefix')" name="editSuffix" style="float:left; width:70px;" type="text" value="@Model.Pharmacy.Suffix" depends />
  </div>
  <span style="margin-left:-208px; margin-top:50px;" id="editPhoneError" value="0"></span>
  </div>

你可以做如下事情：

JS

$（“.phone validation”）.blur（函数（）{
var regex=/^[0-9]+$/；
var phone=此值；
if（phone.length>0&&phone.length0）；
});   
}

标记：

 <div>
 <input id="editArea" maxlength="3" onkeyup="tabout(this,'editPrefix')" name="editArea" style="float:left; width:70px;" type="text" value="@Model.Pharmacy.Area" depends />
 </div>
 <div>
 <input id="editPrefix" maxlength="3" onkeyup="tabout(this,'editSuffix')" name="editPrefix" style="float:left; width:70px;" type="text" value="@Model.Pharmacy.Prefix" depends />
  </div>
  <div>
  <input id="editSuffix" maxlength="4" onkeyup="tabout(this,'editPrefix')" name="editSuffix" style="float:left; width:70px;" type="text" value="@Model.Pharmacy.Suffix" depends />
  </div>
  <span style="margin-left:-208px; margin-top:50px;" id="editPhoneError" value="0"></span>
  </div>

 <div>
 <input class="phone-validation" maxlength="3" onkeyup="tabout(this,'editPrefix')" name="editArea" style="float:left; width:70px;" type="text" value="@Model.Pharmacy.Area" depends />
 </div>
 <div>
 <input class="phone-validation" maxlength="3" onkeyup="tabout(this,'editSuffix')" name="editPrefix" style="float:left; width:70px;" type="text" value="@Model.Pharmacy.Prefix" depends />
  </div>
  <div>
  <input class="phone-validation" maxlength="4" onkeyup="tabout(this,'editPrefix')" name="editSuffix" style="float:left; width:70px;" type="text" value="@Model.Pharmacy.Suffix" depends />
  </div>
  <span style="margin-left:-208px; margin-top:50px;" id="editPhoneError" value="0"></span>
  </div>

 > p>您应该考虑使用<代码>类< /代码>而不是<代码> ID>代码>，以使该表单更具伸缩性。我简化了您的jQuery，这似乎工作得很好：


HTML

<div>
  <input class="phone" id="editArea" maxlength="3" onkeyup="tabout(this,'editPrefix')" name="editArea" type="text" />
</div>

<div>
 <input class="phone" id="editPrefix" maxlength="3" onkeyup="tabout(this,'editSuffix')" name="editPrefix" type="text" />
</div>

<div>
 <input class="phone" id="editSuffix" maxlength="4" onkeyup="tabout(this,'editPrefix')" name="editSuffix" type="text" />
</div>

 <span style="color:#cc0000; display:none;" id="editPhoneError" value="0">The number must be a numeric 10 digit value</span>

您应该考虑使用<代码>类< /代码>而不是<代码> ID>代码>，以使该表单更具伸缩性。我简化了您的jQuery，这似乎工作得很好：

HTML

<div>
  <input class="phone" id="editArea" maxlength="3" onkeyup="tabout(this,'editPrefix')" name="editArea" type="text" />
</div>

<div>
 <input class="phone" id="editPrefix" maxlength="3" onkeyup="tabout(this,'editSuffix')" name="editPrefix" type="text" />
</div>

<div>
 <input class="phone" id="editSuffix" maxlength="4" onkeyup="tabout(this,'editPrefix')" name="editSuffix" type="text" />
</div>

 <span style="color:#cc0000; display:none;" id="editPhoneError" value="0">The number must be a numeric 10 digit value</span>

在if语句中的逻辑操作之间添加适当的括号。验证可能会导致意外结果，否则请在if语句中的逻辑操作之间添加适当的括号。验证可能会导致其他方面的意外结果这正是您所要求的？这正是您所要求的？