Javascript 如何使用约束验证验证Bootstrap 4中的手机号码？

下面是我用来创建表单的代码。 基本上，我需要使用约束验证在客户端验证手机号码。此外，用户输入数据时应显示错误消息。 我用过mdboostrap。

oninput=“check（this）”

调用该函数。 我需要位数等于10。 这是一个用于编辑的代码笔

---

我需要如上所述编写函数。

您可以添加一个pattern属性，使位数等于10

<input type="tel" pattern=".{10}" class="form-control" id="validationCustom08" placeholder="Mobile" oninput="check(this)" required>

.wrapper{
利润率：5%自动；
背景色：#FFF；
盒子阴影：0.4px4px0 rgba（0,0,0,0.14），0.3px4px-2pxRGBA（0,0,0,0.12），0.4px5px0 rgba（0,0,0,0.2）；
填充：20px；
最大宽度：600px；
}
身体{
背景：url（'http://www.baltana.com/files/wallpapers-5/Blue-Background-HQ-Desktop-Wallpaper-16270.jpg');
}

登记
名字
看起来不错！
此字段不能为空。
姓
看起来不错！
此字段不能为空。
用户名
@
请选择一个用户名。
地址
此字段必填。
城市
请提供一个有效的城市。
陈述
请提供有效状态。
拉链
请提供有效的邮政编码。
国家代码
印度（+91）
其他国家
美国（+1）
英国（+44）
请选择一个有效的选项。
可移动的
看起来不错！。
请提供有效号码。
性别
男性
女性
密码
仅限大小写且长度大于8的数字。
电子邮件
请输入有效的电子邮件ID
同意条款和条件
提交前必须同意。
提交表格

要正确匹配英国电话号码，您需要将模式修改为更复杂的模式：

<input type="tel"  pattern="^\s*\(?(020[7,8]{1}\)?[ ]?[1-9]{1}[0-9{2}[ ]?[0-9]{4})|(0[1-8]{1}[0-9]{3}\)?[ ]?[1-9]{1}[0-9]{2}[ ]?[0-9]{3})\s*$" class="form-control" id="Telephone"
                                    aria-describedby="telephoneHelp" placeholder="Enter telephone" required>

它确实有效。但更倾向于使用Javascript进行验证。谢谢，顺便说一句。在我这边工作。让我看看我能做些什么。这可能会帮助您更好地理解约束验证API。是的，我有点熟悉。我建议您使用pattern属性，并在获得

input.validity.patternmatch

新代码段无法按预期工作时使用自定义消息。我必须添加pattern属性，它才能工作。我不想添加pattern属性。我知道使用pattern属性更容易，但不会显示自定义错误。

<input type="tel"  pattern="^\s*\(?(020[7,8]{1}\)?[ ]?[1-9]{1}[0-9{2}[ ]?[0-9]{4})|(0[1-8]{1}[0-9]{3}\)?[ ]?[1-9]{1}[0-9]{2}[ ]?[0-9]{3})\s*$" class="form-control" id="Telephone"
                                    aria-describedby="telephoneHelp" placeholder="Enter telephone" required>