前言

    前端的童鞋在写页面时, 都不可避免的总会踩到表单验证这个坑. 这时候, 我们就要跪了, 因为要写一堆js来检查. 但是自从H5出现后, 很多常见的表达验证, 它都已经帮我们实现了, 让我们减轻了很多负担, 就好像下面的:

邮箱地址验证:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Test</title>

</head>

<body>

    <form action="">

        <label >

            邮箱: <input type="email">

        </label>

        <input type="submit">

    </form>

</body>

</html>

    邮箱验证是H5自身支持的, 但是我们要验证的场景和情况是多种多样的, 那该怎么办? 用回Js吗? 很明显没这么蛋疼, 因为H5提供了pattern属性, 让我们自食其力! 我们可以在pattern指定正则表达式, 只要正则写的好, 验证就没烦恼!

正则限定11位数字:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Test</title>

</head>

<body>

    <form action="">

        <label >

            数字: <input type="text" pattern="^\d{11}$">

        </label>

        <input type="submit">

    </form>

</body>

</html>

问题

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

解决方案

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

  • oninvalid：提交的input元素的值为无效值时（这里是正则验证失败），触发
    oninvalid事件。oninvalid属于Form 事件。

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

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

<!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>

结果:

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

欢迎各位大神指点交流,转载请注明来源: https://segmentfault.com/a/11...

本文转载于:猿2048H5: 表单验证失败的提示语

H5: 表单验证失败的提示语的更多相关文章

  1. form表单验证失败，阻止表单提交

    form表单验证失败,阻止表单提交 效果演示: 贴上完整代码: <!DOCTYPE html> <html lang="en"> <head> ...

  2. ElementUi 表单验证失败后 页面滚动到表单验证失败位置

    1.应用场景 当进行长表单验证时 用户填写到了单子的最下面 可是已经滚动过去的部分单子验证失败 为了友好的用户体验 这时候就需要滚动到验证失败位置 2.解决思路 elementUi本身并没有提供相关获 ...

  3. h5表单验证的css和js方法

    1.css3 提示只适用于高级浏览器: Chrome,Firefox,Safari,IE9+ valid.invalid.required的定义 代码如下: input:required, input ...

  4. H5——表单验证新特性，注册模态框！

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. 转：MVC2表单验证失败后，直接返回View，已填写的内容就会清空，可以这样做；MVC2输出文本;MVC2输出PDF文件

    ViewData.ModelState.AddModelError("FormValidator", message); foreach (string field in Requ ...

  6. H5自带表单验证

    HTML5自带的表单验证 转载:https://www.web-tinker.com/article/20781.html HTML5对表单元素提供了patern属性,它接受一个正则表达式.表单提交时 ...

  7. Bootstrap表单验证插件bootstrapValidator使用方法整理

    插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用方法:http://www.cnblogs.com/huangc ...

  8. AngularJs 入门系列-2 表单验证

    对于日常的开发来说,最常见的开发场景就是通过表单编辑数据,这里涉及的问题就是验证问题. angularjs 内置已经支持了常见的验证方式,可以轻松实现表单验证. 1. 绑定 为了方便,我们在 $sco ...

  9. 使用vue做表单验证

    <template> <Form ref="formInline" :model="formInline" :rules="rule ...

随机推荐

  1. VS Code 启动占用100%Cpu问题解决办法

    打开VS Code之后,点击文件->首选项->设置 search.followSymlinks

  2. 2022java蓝桥杯算法训练

    1.印章: 代码: 1 import java.util.Scanner; 2 3 public class Main { 4 public static void main(String[] arg ...

  3. LeetCode-074-搜索二维矩阵

    搜索二维矩阵 题目描述:编写一个高效的算法来判断 m x n 矩阵中,是否存在一个目标值.该矩阵具有如下特性: 每行中的整数从左到右按升序排列. 每行的第一个整数大于前一行的最后一个整数. 示例说明请 ...

  4. gitee 的使用

    Git安装教程(windows)   Git是当今最流行的版本控制软件,它包含了许多高级工具,这里小编就讲一下Git的安装. 下载地址:https://git-scm.com/downloads 首先 ...

  5. Python 从底层结构聊 Beautiful Soup 4（内置豆瓣最新电影排行榜爬取案例）

    1. 前言 什么是 Beautiful Soup 4 ? Beautiful Soup 4(简称 BS4,后面的 4 表示最新版本)是一个 Python 第三方库,具有解析 HTML 页面的功能,爬虫 ...

  6. 解决vue单页面应用做微信JSSDK注入权限时出现“invalid signature”（ios端）

    --都说微信开发多坑,没想到遇到一个天坑. 在做一个vue项目时,要用到微信JS-SDK,官方文档详见:https://developers.weixin.qq.com/doc/offiaccount ...

  7. 单循环链表（基于java语言）

    public class CircleSinglyLinkList { private Node head; CircleSinglyLinkList(){ this.head = null; } C ...

  8. Java多线程【三种实现方法】

    java多线程 并发与并行 并发:在操作系统中,是指一个时间段中有几个程序都处于已启动运行到运行完毕之间,且这几个程序都是在同一个处理机上运行,但任一个时刻点上只有一个程序在处理机上运行 并行:一组程 ...

  9. php——新闻项目改写

    主要思路:遵守java开发规范,保持接口一致性 如何保持接口的一致性: (1).url的一致性:使用@RequestingMapping注解 (2).参数的一致性: 使用@ReuqestParam注解 ...

  10. 给R语言RStudio添加阿里云镜像源

    镜像下载.域名解析.时间同步请点击阿里云开源镜像站 方法一: 打开RStudio,输入options()$repos查看默认镜像源情况 options()$repos 打开tools工具栏,找到Glo ...