【发布时间】：2015-06-18 04:04:20
【问题描述】：
我一直在尝试在 jQuery 中验证电话号码，但由于某种原因，代码无法按预期验证条件。
HTML 代码：
<!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"但是，一旦我删除 非数字并用数字替换它，同样的错误 消息仍然存在，这是不正确的。要消除上述错误，我需要等到数字计数达到 10 位 （因为我的目标是 10 位单元格编号）。在整个过程中，上述错误信息不断出现。假设我输入数字为 785 并从输入框出来，它应该抛出 "Number should be exact 10 digits"
error-message直到它达到 10数字计数。但是，目前还没有发生这种情况。此外，即使计数超过规定的 10 位数标记，也不会显示错误消息。我想要的是，
after 10-digits mark is crossed，error-message should flash stating"Number should be exact 10 digits"和框应该变成红色。
如何解决上述问题？ 任何帮助将不胜感激。
【问题讨论】：
-
问一个问题。
-
@AvinashRaj - 尝试运行代码，你就会明白我在说什么。问题可能看起来很长，但它只是一个问题。
-
使用
keypress而不是blur，使用html5的maxlength属性防止>10位数。 -
我还没准备好运行你的代码，因为我不是 js 背景。如果您减少问题的长度，您的问题就会得到解决。而不是发布整个代码，您可能会问，“嘿，我希望密码字段允许这个和这个字符，但不允许这个。我试过这个，但它失败了，”就像那样。
-
顺便提一下，
altContactNo已经是一个 jQuery 对象。不需要$(altContactNo)。contactErrorMsg也是如此。
标签： jquery regex validation