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表單驗證電話號碼

回答

相關問題