javascript表单验证电话号码
问题描述:
我认为这将是整洁,尝试做我自己的表单验证。我可以在代码上测试电话号码。我使用的JavaScript只允许数字,并检测数字的位数。如果数字是3或7,我想添加一个破折号。它设置为7,因为在我输入第一个短划线后,短划线包含在字符串中,第二短划线成为字符串中的第8个位置。现在,这很好,但如果用户输入了一个错误的数字并且短划线出现了,那么当用户尝试退格时,它会看到字符串长度回到3或7,并自动将短划线放回那里,而不是允许用户一次返回一个空间来纠正错误。如果他们按住退格键,它将被删除。我试过使用拆分和子字符串,并无法弄清楚如何工作,因此它能正常工作。javascript表单验证电话号码
HTML
<form>
<input type = 'text' name = 'txtPhone' id = 'txtPhone' onkeypress = 'return numbersOnly(event)' onkeyup = 'validateForm(this.id)'/>
</form>
的JavaScript
function numbersOnly(e){
var unicode = (e.charCode) ? e.charCode : e.keyCode;
if (unicode == 8
|| unicode == 9
|| (unicode >= 48 && unicode <= 57)
)}
return true;
}else{
return false;
}
}
function validateForm(id){
var id = document.getElementById(id);
var unicode = (event.charCode) ? event.charCode : event.keyCode;
// first add slashes after third and sixth digit
if (id.value.length == 3
|| id.value.length == 7
){
var newValue = id.value += "-";
id.value = newValue;
}
// if backspace is pressed, remove the dash
if (unicode == 8){
var value = document.getElementById(id).value;
value = value.substring(0, value.length - 1);
}
}
答
在你onchange
功能,检查是否有尾随破折号第一。如果该字段刚刚更改并且有一个尾随短划线,则用户刚刚删除了以下字符,并且应该删除它们的短划线。删除破折号后,无需执行其他任何操作即可返回。由于onchange
事件将不会再次触发,直到用户再次更改该字段为止,您的代码将不会再插入另一个短划线,因为直到字段中有6个或8个字符,才会再次调用它。
当然,这是过于简单化。有些情况下,用户可以编辑字符串的中间部分并将其拧紧。我会建议a)使用库或b)使用一些正则表达式,而不是仅仅检查字段长度。
你可以在你的表单中使用Jquery吗? – Amit 2013-03-18 04:14:13
最简单的方法是创建一个变量,记录最后一个按下的按钮是否是退格键,而不是再次添加短划线,直到按下不同的按键。另一种方法是预先定义一个可见的模板,并跟踪击键并使用该模板通过存储实际数字的中间字符串填充模板(使您可以更改模板,而不会扰乱逻辑,例如支持(555)555 -5555 – Offbeatmammal 2013-03-18 04:15:33
您可以使用[HTML5输入约束验证](https://developer.mozilla.org/en-US/docs/HTML/Forms_in_HTML#HTML_Syntax_for_Constraint_Validation) - 另外,我对您进行了一些更改http:// jsfiddle。 net/rlemon/A5JpN/1 /,最后在第二个函数中定义了'event'?我是否缺少内联函数? – rlemon 2013-03-18 04:16:47