H5: 表单验证失败的提示语
前言
前端的童鞋在写页面时, 都不可避免的总会踩到表单验证这个坑. 这时候, 我们就要跪了, 因为要写一堆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: 表单验证失败的提示语的更多相关文章
- form表单验证失败，阻止表单提交
form表单验证失败,阻止表单提交 效果演示: 贴上完整代码: <!DOCTYPE html> <html lang="en"> <head> ...
- ElementUi 表单验证失败后 页面滚动到表单验证失败位置
1.应用场景 当进行长表单验证时 用户填写到了单子的最下面 可是已经滚动过去的部分单子验证失败 为了友好的用户体验 这时候就需要滚动到验证失败位置 2.解决思路 elementUi本身并没有提供相关获 ...
- h5表单验证的css和js方法
1.css3 提示只适用于高级浏览器: Chrome,Firefox,Safari,IE9+ valid.invalid.required的定义 代码如下: input:required, input ...
- H5——表单验证新特性，注册模态框！
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 转：MVC2表单验证失败后，直接返回View，已填写的内容就会清空，可以这样做；MVC2输出文本;MVC2输出PDF文件
ViewData.ModelState.AddModelError("FormValidator", message); foreach (string field in Requ ...
- H5自带表单验证
HTML5自带的表单验证 转载:https://www.web-tinker.com/article/20781.html HTML5对表单元素提供了patern属性,它接受一个正则表达式.表单提交时 ...
- Bootstrap表单验证插件bootstrapValidator使用方法整理
插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用方法:http://www.cnblogs.com/huangc ...
- AngularJs 入门系列-2 表单验证
对于日常的开发来说,最常见的开发场景就是通过表单编辑数据,这里涉及的问题就是验证问题. angularjs 内置已经支持了常见的验证方式,可以轻松实现表单验证. 1. 绑定 为了方便,我们在 $sco ...
- 使用vue做表单验证
<template> <Form ref="formInline" :model="formInline" :rules="rule ...
随机推荐
- Phoenix使用
目录 Phoenix连接 Phoenix常用命令 表映射 视图映射 表映射 Phoenix二级索引 开启索引支持 全局索引 创建索引后 创建多条件索引后 本地索引 覆盖索引 总结 Phoenix JD ...
- go RWMutex 的实现
Overview go 里面的 rwlock 是 write preferred 的,可以避免写锁饥饿. 读锁和写锁按照先来后到的规则持有锁,一旦有协程持有了写锁,后面的协程只能在写锁被释放后才能得到 ...
- Java入土---基本DOS命令
基本DOS命令 打开cmd方式 开始+系统+命令提示符 win+R,输入cmd 在任意文件夹下,按住shift + 右键,打开命令行窗口 资源管理器里打开 常用DOS命令 盘符切换 E: dir命令查 ...
- tensorflow源码剖析之framework-kernel
目录 什么是kernel kernel_def op_kernel kernel的注册 op_segment 关系图 涉及的文件 迭代记录 1. 什么是kernel 如果说op相当于操作的声明,那么k ...
- CentOS下mysql常用命令
CentOS下mysql常用命令 1.开启和关闭 1.1.开启 service mysql start 1.2.关闭 service mysql stop 1.3.重启 service mysql ...
- largebin attack
largebin attack 由这个名字就可以看出是对 largebin 进行的操作,需要的条件是存在 UAF 或者可以构造出 UAF.实现的功能是: 1.任意地址写入一个大数字 2.实现任意地址分 ...
- 一比一还原axios源码（六）—— 配置化
上一章我们完成了拦截器的代码实现,这一章我们来看看配置化是如何实现的.首先,按照惯例我们来看看axios的文档是怎么说的: 首先我们可以可以通过axios上的defaults属性来配置api. 我们可 ...
- SQL Server2012安装教程
什么是SQL? 结构化查询语言(Structured Query Language)简称SQL,是一种特殊目的的编程语言,是一种数据库查询和程序设计语言,用于存取数据以及查询.更新和管理关系数据库系统 ...
- FreeBSD 利用IPFW实现限制局域网使用QQ
QQ服务器分为三类: 1.UDP 8000端口类7个:速度最快,服务器最多.QQ上线会向这7个服务器发送UDP数据包,选择回复速度最快的一个作为连接服务器.这7个服务器名字均以sz-sz7开头,域后缀 ...
- Apache BeanUtils与Spring BeanUtils性能比较
在我们实际项目开发过程中,我们经常需要将不同的两个对象实例进行属性复制,从而基于源对象的属性信息进行后续操作,而不改变源对象的属性信息,比如DTO数据传输对象和数据对象DO,我们需要将DO对象进行属性 ...