前言

    前端的童鞋在写页面时, 都不可避免的总会踩到表单验证这个坑. 这时候, 我们就要跪了, 因为要写一堆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:使用piecewise与curve_fit进行三段拟合

    x = np.array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ,11, 12, 13, 14, 15,16,17,18,19,20,21], dtype=float) y = ...

  2. c/c++ 日常积累

    基类是抽象类,有(纯)虚函数,子类必须要把所有的都实现啊啊啊!!!!包括子类的析构,你写一个~xx类 = default;也好啊啊啊啊啊啊啊,不然报错!!!!啊啊啊啊啊 流下了悔恨的泪水!!!... ...

  3. python+pytest接口自动化(4)-requests发送get请求

    python中用于请求http接口的有自带的urllib和第三方库requests,但 urllib 写法稍微有点繁琐,所以在进行接口自动化测试过程中,一般使用更为简洁且功能强大的 requests ...

  4. Sublime Text 3 build 3103 注册码

    分享几个ST3的注册码,第一个我注册到自己电脑上,亲测可用,剩余几个没有测试.→原文链接 -– BEGIN LICENSE -–Michael BarnesSingle User LicenseEA7 ...

  5. 微信小程序 app.js globalData 赋值报错

    //success方法要用用success: res => {}的格式 success: res => { } //赋值报错 success:function(e){ } //报错内容: ...

  6. 《手把手教你》系列基础篇（七十七）-java+ selenium自动化测试-框架设计基础-TestNG依赖测试- 上篇（详解教程）

    1.简介 今天主要是讲解和分享:TestNG中一个类中有多个测试方法的时候,多个测试方法的执行顺序或者依赖关系的问题.如果不用dependsOnMethods,testNG会自动根据@Test方法名称 ...

  7. Linux特殊权限之suid、sgid、sbit权限

    文件权限管理之特殊命令 一:特殊权限 昨天所学的Linux基本权限为为9个:分别是rwx rwx rwx.但有时会发现系统中会有一些特殊的权限位符号: 例如: Linux系统一共有12个特殊权限符: ...

  8. [NOIP2013 普及组] 表达式求值

    [NOIP2013 普及组] 表达式求值 给定一个只包含加法和乘法的算术表达式,请你编程计算表达式的值. Input 一行,为需要你计算的表达式,表达式中只包含数字.加法运算符"+" ...

  9. Numpy库基础___二

    ndarray一个强大的N维数组对象Array •ndarray的变换 x.reshape(shape)重塑数组的shape,要求元素的个数一致,不改变原数组 x = np.ones((2,3,4), ...

  10. Java基础——基本类型包装类

    一.概述: 将基本数据类型封装成对象 优点: 可以在对象中定义更多的功能方法操作该数据 常见用法: 用于基本类型与字符串之间的转换 基本数据类型 包装类 byte Byte short Short i ...