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); 
    } 
}

来源

2013-03-18 Vince

你可以在你的表单中使用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

在你onchange功能，检查是否有尾随破折号第一。如果该字段刚刚更改并且有一个尾随短划线，则用户刚刚删除了以下字符，并且应该删除它们的短划线。删除破折号后，无需执行其他任何操作即可返回。由于onchange事件将不会再次触发，直到用户再次更改该字段为止，您的代码将不会再插入另一个短划线，因为直到字段中有6个或8个字符，才会再次调用它。

当然，这是过于简单化。有些情况下，用户可以编辑字符串的中间部分并将其拧紧。我会建议a）使用库或b）使用一些正则表达式，而不是仅仅检查字段长度。

来源

2013-03-18 04:43:49 GJK

javascript表单验证电话号码

回答

相关问题