Question

我一直在尝试验证jQuery中的电话号码，但由于某种原因，代码无法按预期验证条件。

HTML code：

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="jquery-1.11.2.js"></script>
<script type="text/javascript" src="custReg.js"></script>

<link rel="stylesheet" type="text/css" href="custRegistration.css">
</head>
<body bgcolor ="lightgray" fontcolor="red">
    <form action="" name="myForm" method="get" onsubmit="">

        <div id="container">
            <fieldset>
                <legend style="background-color: aqua;">Registration Page</legend>
    <div id="primaryContact">Primary Contact No.</div>
                <div id="alternateContact">Alternate Contact No.</div>  

                <div id="contactNoBlock">
                    <input type="text" name="primaryNumber" value="+91-" id="primaryNumber"  class="textBox1" />   <!--  -->
                    <input type="text" name="altNumber" value="+91-" id="altNumber" class="textBox1" />
                </div>

                <div id="contact_error_msg"></div>
                <br>
</div> <!-- <div id="container"> closes here  -->

        </fieldset>

    </form>
</body>
</html>

CSS代码：

fieldset {
    width: 120%;
    border: solid 1px black;}

legend {
    color: black;
    font-style: italic;
    font-size: 15px;
    border: solid 1px black;
    margin: 25px; } 


.textBox1 {
    margin: 10px;
    padding: 5px;
    width: 280px;}

#primaryContact{
    margin-left:10px;
    font-style: italic;
    font-weight: bold;
    color: #a77;
    position: relative;
    top:12px;

}

#alternateContact{

    font-style: italic;
    font-weight: bold;
    color: #a77;
    position: relative;
    left: 335px;
    top:-5px;

}

jQuery代码：

$(document).ready(function() {
    var altContactNo = $('#altNumber');
    var contactErrorMsg = $('#contact_error_msg');
    var regexIn = /\(?([0-9]{3})\)?([ .-]?)([0-9]{3})\2([0-9]{4})/ ;

    $(altContactNo).blur(function(){

     var value = $(altContactNo).val();  
     alert(value);


     if(value.length<=4){     
      $(contactErrorMsg).text("Please enter Alternate Contact Number");
      $(this).css('border','1px solid red');
   }

     else if(!regexIn.test(value)){
         $(contactErrorMsg).text("Only digits accepted "); 
         $(this).css('border','1px solid red');  
     }

     else if ((value.length>=4) && (value.length<=14)){
         $(contactErrorMsg).text("Number should be exact 10 digits"); 
         $(this).css('border','1px solid red'); 
    } 



     else{
          $(this).css('border','1px solid green');
          $(contactErrorMsg).text(""); 
         }

});


});

我对此代码所面临的挑战：

当我输入任何非数字数字时，代码会将错误显示为   预期 - "Only digits accepted" 然而，一旦我删除了   非数字数字＆amp;用数字替换它，同样的错误   消息仍然存在，这是不正确的。



为了解除上述错误，我需要等到数字计数达到10位数（因为我的目标是10位数的单元格数）。在整个过程中，上述错误消息将继续显示。比方说，如果我输入数字 785 并从输入框输出，它应该抛出“数字应该是10位数” error-message直到它达到10位数。但是，目前还没有发生这种情况。



此外，即使计数超出规定的10位数标记，也不会显示错误消息。我想要的是， after 10-digits mark is crossed ， error-message should flash stating "Number should be exact 10 digits" ，框应该变为红色。

如何解决上述问题？我们非常感谢您提供帮助。

Answer 1

您正在对正则表达式进行验证，并且当出于任何原因与正则表达式不匹配时，您显示“仅接受数字”。这意味着无论是由于字符选择还是长度或间距，您都会在输入的内容中看到此消息。

出于同样的原因，你没有看到“数字应该是10位数”的消息，因为当数字少于10位时，它与正则表达式不匹配并落入第二个if子句。

根据不同语言处理正则表达式验证的方式，某些实现将允许多个匹配。如果是这种情况，则“1234567890123”可以匹配，因为“1234567890”匹配。尝试将“^”放在开头，将“$”放在正则表达式的末尾，这将限制验证，使其仅匹配一次。

Answer 2

这不会直接回答您的问题，但您也可以根据HTML5中输入引入的属性验证输入字段。像这样：

<input type="tel" pattern="\+91\-[0-9]{3}[ .-][0-9]{3}[ .-][0-9]{4}" value="+91-" />

结果：

http://jsfiddle.net/wojtekmaj/g28cqnLw/

另外，在我看来，如果用户没有输入您想要的精确格式，那么只有在某些事情可能出现严重错误的情况下才应使用这种严格的数字验证。这对用户体验来说太可怕了。

jQuery Phone验证无法按预期工作

2 个答案: