前言

    前端的童鞋在写页面时, 都不可避免的总会踩到表单验证这个坑. 这时候, 我们就要跪了, 因为要写一堆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. Python：Scrapy（三） 进阶：额外的一些类ItemLoader与CrawlSpider，使用原理及总结

    学习自:Python Scrapy 爬虫框架实例(一) - Blue·Sky - 博客园 这一节是对前两节内容的补充,涉及内容为一些额外的类与方法,来对原代码进行改进 原代码:这里并没有用前两节的代码 ...

  2. MIPI CSI-2 像素打包格式解析

    背景 MIPI CSI-2支持YUV.RGB和RAW data三种数据格式,这里是个笼统的叫法,具体又根据不同的像素打包方式细分为具体的格式,打包是什么概念?就是把Sensor采样得到的RGB三个通道 ...

  3. SpringMVC入门一：基础知识（依赖、注解、文件上传/下载、拦截器、异常处理等）

    为了使Spring可插入MVC架构,SpringFrameWork在Spring基础上开发SpringMVC框架,从而使用Spring进行WEB开发时可以选择使用Spring的SpringMVC框架作 ...

  4. 前端工程化：使用 shelljs 生成 yapi 接口文件

    之前的文章介绍了使用 yapi-to-typescript (下文简称 ytt)生成接口类型定义文件,方便我们直接使用接口的请求和响应类型,能减少很多写接口类型的时间. 使用 yapi-to-type ...

  5. 微信小程序文件上传至七牛云（laravel7）

    1 wxml: <view> <form bindsubmit="dopost"> <view> <label>真实姓名</l ...

  6. Sequelize关联查询，where影响全局的解决

    需求背景 系统字段关联公司字段表,通过查询所有的系统字段然后关联查询指定的公司对应的字段. 问题代码 const sysField = ctx.model.SysDictionary; const c ...

  7. Qt记事本，美化版

    主体代码实现 #include "mainwindow.h" #include "ui_mainwindow.h" #include<QMenu> ...

  8. 最长公共子串（DP）

    DP基础_最长公共子串 Description 两个序列的最长公共子串,这个子串要求在序列中是连续的.如:"bab"和"caba" (可以看出来最长公共子串是& ...

  9. VS code 设置中文语言环境（实现语言切换自由）

    1.打开vs code,然后按快捷键ctrl+shift+p,输入configure language>回车 2.选择Install Additional Languages... 3.在左侧选 ...

  10. [SPDK/NVMe存储技术分析]013 - libibverbs API应用案例分析

    本文是对论文Dissecting a Small InfiniBand Application Using the Verbs API所做的中英文对照翻译 Dissecting a Small Inf ...