HTML 电话号码验证答案

【问题标题】：HTML phone number validationHTML 电话号码验证
【发布时间】：2022-02-04 02:40:28
【问题描述】：

我正在开发一个 HTML 网站，但我遇到了一种情况。

客户只想添加电话号码，不添加字母字符，条件是如果有人在 10 位电话号码前输入 +91（即 +917894561236），则应接受电话号码字段并提交电话号码，如果他没有添加 +91，该字段也应该接受 10 位电话号码，但不少于 10 个号码。

这是我的html：

<div class="form-group">
  <label for="">Phone number *</label>
  <input type="text" class="form-control" minlength=10 required name="phone_m" id="phoned"
         placeholder="Enter Your Phone Number" pattern="^(\+91[\-\s]?)?[0]?(91)?[6789]\d{9}$"
         oninput="if (typeof this.reportValidity === 'function') {this.reportValidity();}" / >
</div>

下面的 jQuery 脚本用于从电话字段中删除字母，但是在输入字段中添加 type="tel" 并不会阻止用户输入字母

<script>
//to get only numeric values in phone number field
jQuery('#phoned').keyup(function () { 
    this.value = this.value.replace(/[^0-9+\.-]/g, '');
});
</script>

【问题讨论】：

您的输入应该是type='tel'，您可以添加一个pattern 属性，该属性采用正则表达式来满足您的要求。如果您这样做，您可以删除 maxlength，并且您的占位符应该与您的预期模式相匹配，以免混淆用户。
使用正则表达式获得您想要的结果。删除maxlength，因为您不能接受+91 或将manlength 用作13（手机号码为10 位，+91 为3 位/字符）。您可以将minlength 用作 10，因为您需要 10 位数的手机号码。对于匹配的手机号码，您可以使用[6-9]{1}[0-9]{9}，其中号码从 6 或 7 或 8 或 9 开始，其余 9 位数字可以是任何数字。对于匹配 +91 你可以做类似的事情
@Cre 你不能在整个页面上散布代码要求。如果您提供一些应该和不应该被允许的示例字符串，您的问题会更清楚。您收到了投票，因为没有证据表明您已经研究并尝试自我解决。我们并不是要“为您工作”，我们在这里帮助您解决失败的尝试。 “帮助吸血鬼”很糟糕。
@Don 请避免编辑已关闭的问题，除非编辑使问题成为重新打开的良好候选者。我之所以这么说是因为您的编辑已将此问题置于重新打开队列中，但 OP 需要提供更多清晰/详细信息。
我明白了，对此感到抱歉。它出现在建议的编辑审查队列中。我批准了编辑，但我自己改进了它。将注意避免编辑封闭的问题，感谢您指出这一点。

标签： javascript php html jquery

【解决方案1】：

试试这个，它会起作用，我用过我的客户

<div class="form-group">
  <label for="phone">Enter your phone number:</label>
    <input type="text" class="form-control" title="please enter a valid phone number" pattern="^(\+91[\-\s]?)?[0]?(91)?[6789]\d{9}$" oninput="if (typeof this.reportValidity === 'function') {this.reportValidity();}" />
</div>

【讨论】：

是的，这正是我想要的，我可以对它做一些小的改动吗，这不能接受以 1, 4 5, 3, 2 开头的数字，而且字母字符除外
您可以在此处添加 [6789] 个起始数字，也可以在此处添加 0-9
跨度>
上面的 cmnt 是我当前的代码，但是用户仍然可以输入 alphabats ，但是我们应用了验证，我不希望用户输入 alphabats

【解决方案2】：

根据我上面的评论，试试这个：

<div class="form-group">
  <label for="phone">Enter your phone number:</label>
  <input type="tel" id="phone" name="phone" placeholder="+910123456789 or 0123456789" pattern="[+0-9]{10,13}">
</div>

您可以在这里测试正则表达式：https://regex101.com/

function displayInputValue() {
  console.log(document.querySelector("input[type='tel']").value)
}

<div class="form-group">
  <label for="phone">Enter your phone number:</label>
  <input type="tel" id="phone" name="phone" placeholder="+910123456789 or 0123456789" pattern="[+0-9]{10,13}">
  <button type="button" onClick="displayInputValue()">Show Value</button>
</div>

【讨论】：

这种模式将允许+++++++++
用户仍然可以输入字母

【解决方案3】：

我为我的客户编写并使用了这个函数，它在他们输入时格式化，并实际检查输入的字符是否为数字，以及修剪长度。他们想要的格式是“XXX-XXX-XXXX”，但我相信你可以修改我的代码以满足你的需要。正则表达式并不完美，但如果他们复制并过去 s*** 它将阻止他们提交。

document.getElementById("phone").onkeyup = function()
{
    const CHAR_AMOUNT = this.value.length;
    // Check each character as the user types it, do not exceed the format we want of "XXX-XXX-XXXX".
    if (CHAR_AMOUNT < 13)
    {
        // Get the position of the last char, and check if the string has at least 1 char.
        // THAN get the last character typed by the user and check if it is a valid numerical type, if not, get rid of it.
        const LAST_CHAR_POS = CHAR_AMOUNT - 1;
        if (LAST_CHAR_POS >= 0)
        {
            const LAST_CHAR = this.value.charAt(LAST_CHAR_POS);
            if (isNaN(LAST_CHAR))
            {
                this.value = this.value.slice(0, -1);
                return;
            }
        }
        // Here we auto fill the '-' char after the 3rd and 7th digit of the phone number.
        if ((CHAR_AMOUNT === 3) || (CHAR_AMOUNT === 7))
        {
            this.value += "-";
        }
    }
    else // Trim any excess characters on the phone number. including if someone is copy and poaste a long string.
    {
        this.value = this.value.slice(0, (12 - CHAR_AMOUNT));
        // Ho well, if they copy past garbadge, let the HTML pattern stop them from submitting (-_-).
    }
    return;
};

&lt;input type="tel" id="phone" pattern="\d{3}-\d{3}-\d{4}" placeholder="123-456-7890" title="Must be XXX-XXX-XXXX" required /&gt;

【讨论】：