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实践-使用css装饰图片画廊的代码分享（一）

如何自动获取HTML5的data-*属性示例代码详解

HTML5的学习路线分析

HTML5实现的在线视频播放

深入解析HTML5 内联框架--iframe

怎样开发优秀的HTML5游戏-迪斯尼《寻找奥兹之路》游戏技术详解（二）

h5的语义化标签

HTML5比flash好在哪

HTML5中返回timeranges对象的属性buffered

android使webview支持HTML5 video全屏播放的方法分享（图）

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




标签：

打赏

取消

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

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

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

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

相关推荐

评论

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