例如,我有textfield分.此字段为必填字段,只需要数字,值长度必须为10.当我try 提交长度为5的值的表单时,默认错误消息显示:Please match the requested format

<input type="text" required="" pattern="[0-9]{10}" value="">
  1. 如何更改HTML 5表单验证错误默认消息?
  2. 如果第一点可以做到,那么有没有办法创建一些属性文件,并在这些文件中设置自定义错误消息?

推荐答案

这是JavaScript解决方案:

 <input type="text"
    pattern="[a-zA-Z]+"
    oninvalid="setCustomValidity('Please enter Alphabets.')"
    onchange="try{setCustomValidity('')}catch(e){}" />

"onchange"事件需要在设置无效输入数据时,更正输入并再次发送表单.

But for Modern Browsers:

现代浏览器不需要任何JavaScript进行验证.

<input type="text"
    pattern="[a-zA-Z]+"
    title="Please enter Alphabets."
    required="" />

Html相关问答推荐

在元素之间添加空格

防止SVG边框半径zoom

我应该怎么做才能显示出整个字符串?

更改垫子输入的涟漪 colored颜色

我希望创建一个对角手风琴与不同的内容(文本和图像)在其正常状态和其他元素悬停

如何用等宽字体固定数字在有序列表中的位置

如何在网格中拥有离散的行

如何使链接组件内的内容不重新路由Next.js13

如果最后一行的卡数少于其他行,则在使用flex grow使卡在调整大小时拉伸后,flex卡的宽度将被拉伸

如何使活动选项卡背景作为父背景图像

如何为高度较小的块制作边框动画?

在 flexbox 中使用 spacer 是否有效

当作为常规图片输入时,Cloudfront分布式图像可显示,但作为背景图像不显示

Tailwind:父母动态适应子元素的身高

如何使用 Bootstrap Grid 系统修复大屏幕上图片和进度条之间的空白?

视频添加到 Html 与 Github 不同步

在带有换行文本的工具提示中显示溢出文本

在身体外部创建 tanget 45° div

使用 TailwindCSS 将徽标放在左上角,将菜单放在右上角

那里有一个类似于 ?