jQuery手机号验证修改需求：允许数字及()-.空格等特殊字符

Got it, let's tweak your existing validation code to support those common phone number formatting characters while still restricting unwanted input. Here's the updated solution with explanations:

Updated Keypress Validation Code #

// Phone number validation allowing digits and common formatting characters
$( ".only_numberic" ).keypress(function(event){
    var inputValue = window.event ? event.keyCode : event.which;
    
    // Define allowed keys: control keys + formatting chars + digits
    const allowedSpecialKeys = [8, 9, 13, 32]; // Backspace, Tab, Enter, Space
    const allowedFormatChars = [40, 41, 45, 46]; // (, ), -, .
    const isDigit = (inputValue >= 48 && inputValue <= 57);
    const isAllowed = allowedSpecialKeys.includes(inputValue) || allowedFormatChars.includes(inputValue);
    
    // Block input if it's not a digit or allowed character
    if (!(isDigit || isAllowed)) {
        event.preventDefault();
    }
});

Key Changes Explained: #

• Expanded Allowed Characters: Added support for (, ), -, ., and spaces by including their respective key codes in the allowed list
• Preserved Control Keys: Kept essential control keys (backspace, tab, enter) so users can still edit the input normally without frustration
• Cleaner Logic: Split allowed keys into logical groups for readability, making it easy to adjust later if you need to add/remove characters

Bonus: Submit-Time Validation (Critical for Paste Protection) #

The keypress event won't catch pasted content, so adding a submit-time check ensures invalid characters don't slip through:

// Validate on form submission to catch pasted invalid content
$("form").submit(function(e) {
    const phoneField = $(this).find(".only_numberic");
    const phoneValue = phoneField.val().trim();
    
    // Regex pattern: only digits, spaces, (, ), -, . are allowed
    const validPhoneRegex = /^[\d\s\(\)\-\.]+$/;
    
    if (!validPhoneRegex.test(phoneValue)) {
        alert("Please enter a valid phone number using only digits, spaces, (), -, or .");
        phoneField.focus();
        e.preventDefault();
        return false;
    }
});

Why This Matters: #

Users can paste text into the field that bypasses keypress checks, so this regex validation acts as a final guard to ensure the input meets your requirements before the form is submitted.

内容的提问来源于stack exchange，提问作者user5321787