Javascript 如何根据条件添加自定义HTML验证错误？

我有一个文本输入，我只想输入10位数字的电话号码。我使用的HTML验证如下所示，其工作正常，但当我添加自定义HTML验证错误时，根据情况不正常，始终显示

请仅输入数字

，但我想根据情况添加

我尝试的是：-

联系电话
提交

函数myfunc（）{
var name=document.forms['det']['name']
var age=document.forms['det']['age']
VaR PAR=文档.GETelEngsByTAGNODY（“p”）；
如果（name.value==“”）{
var text=document.createElement（'p'）；
name.parentNode.insertBefore（text，name.nextSibling）；
如果（标准长度==1）{
text.innerHTML=“输入您的姓名”；
}
返回false；
}
如果（age.value==“”）{
var text=document.createElement（'p'）；
age.parentNode.insertBefore（文本，age.nextSibling）；
text.innerHTML=“输入您的年龄”；
如果（标准长度==1）{
text.innerHTML=“输入您的姓名”；
}
返回false；
}
}

---

MDN在这方面有一些很好的文档：

我已经根据下面的代码改编了这篇文章

//获取元素
var el=document.getElementById（“inTest”）；
//将要在上执行的方法设置为有效
el.oninvalid=无效数；
//要执行的函数
函数invalidNum（事件）{
//只是想看看有什么可用的
console.log（this.validity）；
//如果是空的
如果（此.validity.valueMissing）{
此.setCustomValidity（“请输入联系电话”）；
//如果模式不匹配
}else if（this.validity.patternmatch）{
此.setCustomValidity（“请准确输入10个DIDGIT”）；
//别的
}否则{
此.setCustomValidity（“请仅输入数字”）；
}
}

联系电话
提交

您是否尝试过tel输入类型？这是如何打印您希望打印的错误消息的方法。每次当我单击“无提交”按钮而未在“输入控制”中输入任何值时，都会打印错误消息请检查上述代码我已编辑了新更改！在MacOSX上的Safari、Firefox和Chrome中，表单以10位数字提交给我。什么浏览器？