HTML5 表单验证失败的提示语问题

PHP中文网 JavaScript 百度已收录

当前第2页 返回上一页

问题

大家可以尝试下, 在输入非11位的数字, 都会报错, 这就是 pattern 的功劳. 但是不知道大家发现了一个蛋疼的现象没? 就是如果咱们使用 pattern 的方式去验证表单, 在验证失败时, 它的提示都是 请与所请求的格式保持一致 , 我的天, 我们的用户怎么知道所请求的格式是什么鬼, 总不能让他们去看源码吧, 要真这样, 我们连页面都不用写了, 直接让他们把钱给我们得了, 开个玩笑~

解决方案

有问题, 咱们就得解决, 在面向谷歌编程许久, 终于觅得一良方:

oninvalid：提交的input元素的值为无效值时（这里是正则验证失败），触发

oninvalid事件。oninvalid属于Form 事件。

setCustomValidity()：这个是HTML5内置的JS方法，用来自定义提示信息

原来可以通过 oninvalid 和 setCustomValidity 来自定义提示, 那这就好办了, 修改源代码如下:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Test</title>

</head>

<body>

    <form action="">

        <label >

            数字: <input type="text" pattern="^\d{11}$" oninvalid="setCustomValidity('请输入11位数字')">

        </label>

        <input type="submit">

    </form>

</body>

</html>


结果:

终于不是那个蛋疼的"格式"了, 现在表单验证提示已经很明确的告诉我们, 这里应该输入的是什么样的数据, 这样用户就能更好的修改自己的输入了!

相关推荐：

h5表单介绍和表单验证失败问题实例

laravel表单验证失败 如何防止原表单数据都被清空？

JavaScript实现表单验证功能的简单示例

以上就是HTML5 表单验证失败的提示语问题的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

HTML5开发中viewport进行屏幕适配

HTML5 canvas实现简单的双缓冲

HTML5能干什么？详解HTML5的功能

canvas与h5如何实现视频截图功能

详细介绍HTML5 12个设计小技巧（图文）

h5中header标签应该如何使用

HTML5实现移动端自适应的几种方法介绍

常用的HTML5列表标签

HTML5 canvas api中drawimage()方法的使用代码实例分享（图）

HTML5怎样进行跨域通信

更多相关阅读请进入《HTML5》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...