H5自带表单验证
HTML5自带的表单验证
转载：https://www.web-tinker.com/article/20781.html
HTML5对表单元素提供了patern属性，它接受一个正则表达式。表单提交时这个正则表达式会被用于验证表单内非空的值，如果控件的值不匹配这个正则表达就会弹出提示框，并阻止表达提交。提示框内的文字可以使用setCustomValidity方法来自定义。
比如下面这个表单内，文本框只接受大陆的手机号，输入其它东西就无法提交运行
<!DOCTYPE html>
<form>
<input id="text" pattern="^1[3-9]\d{9}$" required />
<input id="button" type="submit" />
</form>
注意只有非空的表单才会使用正则验证，如果什么都不输入的话，pattern不会被使用，所以还需要required协助。但是这个代码弹出的提示是这样的：
这样的提示文字只有猴子看得懂！所以我们还需要更友好的提示文字，使用setCustomValidity方法来定义。运行
<!DOCTYPE html>
<form>
<input id="text" pattern="^1[3-9]\d{9}$" required />
<input id="button" type="submit" />
</form>
<script>
text.oninput=function(){
text.setCustomValidity("");
};
text.oninvalid=function(){
text.setCustomValidity("请不要输入火星的手机号好吗？");
};
</script>
invalid事件会在表单submit事件之前触发，如果验证不通过的话就不会触发表单的submit。而提交时会先验证所有表单元素是值是否有效。除了提交外还可以手动调用checkValidity方法来执行验证。
上面的例子中我直接对控件设置固定的提示其实不太好，有时候可能需要更详细的提示信息，比如空的时候提示为空、太长的时候提示太长、非数字的时候提示非数字等。这些动作可以通过程序验证后动态地setCustomValidity来实现。
其实我觉得HTML5的这套API设计的很糟糕，虽然可以满足基本需求，但还真不太实用。
more
如果想了解更多，这里有一篇转自h5表单验证点击跳转
作者：匡文旺 QQ：674037815
出处：http://www.cnblogs.com/wenwang
本文版权归【简简单单就好】和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
HTML5表单及其验证
H5自带表单验证的更多相关文章
- [H5表单]html5自带表单验证体验优化及提示气泡修改
慕课网之前录制的视频,js/jquery各种宽高的理解和应用,最近终于上线了.还有一个html5左侧导航没有上线!最近慕课网系列课程让我录制一个html5表单验证的课程.今天就稍微说一下表单验证!另外 ...
- html5自带表单验证
起因:今天无意中发现chrome的input框自带表单验证!于是就去试试firefox,惊奇的发现也有自带的验证提示,只不过两者的样式不一样 chrome中的样子: firefox中的样子: 发散:具 ...
- html5自带表单验证-美化改造
神奇的代码 暂且叫做html5.css /* === HTML5 validation styles === */ .myform select:required, .myform input:req ...
- 纯H5+c3实现表单验证
客户端验证是网页客户端程序最常用的功能之一,我们之前使用了各种各样的js库来进行表单的验证.HTML5其实早已为我们提供了表单验证的功能.至于为啥没有流行起来估计是兼容性的问题还有就是样式太丑陋了吧. ...
- 用html5自带表单验证 并且用ajax提交的解决方法(附例子)
用submit来提交表单,然后在js中监听submit方法,用ajax提交表单最后阻止submit的自动提交. 在标准浏览器中,阻止浏览器默认行为使用event.preventDefault(),而在 ...
- JS判断字符串长度，结合element el-input el-form 表单验证（英文占1个字符，中文汉字占2个字符）
首先看看判断字符串长度的几种方法(英文占1个字符,中文汉字占2个字符) 方法一: function strlen(str) { var len = 0; for (var i = 0; i < ...
- JS常见的表单验证，H5自带的验证和正则表达式的验证
H5验证 自带的验证无法满足需求: <form action="" method="get"> name:<input type=" ...
- H5: 表单验证失败的提示语
前言 前端的童鞋在写页面时, 都不可避免的总会踩到表单验证这个坑. 这时候, 我们就要跪了, 因为要写一堆js来检查. 但是自从H5出现后, 很多常见的表达验证, 它都已经帮我们实现了, 让我 ...
- ng自带的表单验证
几点注意:使用ng的表单验证,需要给form,input,textarea一个name 要求:验证输入框的内容(长度,正则,必填,),当验证不通过的时候,就禁用提交按钮 使用的验证:ng-maxlen ...
随机推荐
- Android项目---ActivityGroup的使用
ActivityGroup在一年前已经被说明不用了,但是腾讯QQ,新浪微博上也不乏ActivityGroup的身影.所以,即使是过时的东西,也有学习的必要,当然项目中也是可以添加的.在网上找了一个博客 ...
- C# 通讯网关开发
C# 通讯网关开发 楼主从12年毕业大部分时间一直从事于通讯网关的开发,刚刚学那会连C#是啥都不知道,就直接入手网关开发,前前后后到现在也算是弄了5.6个通讯协议,后来看到北风之神的socket框架和 ...
- EF6+MVC4+EasyUI个人日记系统开源共享
发现在2015年里学习MVC的人越来越多,本人的群成员也越来越多,为了更方便大家学习,在此共享一个个人的小项目. 如下是部分截图: 简单介绍一下本系统的一些相关知识. 1.简单的3层框架,易学易懂 2 ...
- ASP.NET MVC应用程序使用axd格式文件
ASP.NET MVC应用程序使用axd格式文件 axd格式文件,不管是在asp.net还是现在开发asp.net MVC应用程序,都是Insus.NET较喜欢使用的. 因为我们可以虚拟一个在应用程序 ...
- 实现$.fn.extend 和$.extend函数
Jquery揭秘系列:实现$.fn.extend 和$.extend函数 前面我们扩展了bind方法和ready函数,这次我要讲一下$.fn.extend 和$.extend函数. 其他的不多说, ...
- Binder机制，从Java到C （大纲）
转载请标注:张小燕:http://www.cnblogs.com/zhangxinyan/p/3487381.html 前段时间一直在看有关Binder机制的内容,觉得受益匪浅,整理记录于此,大家请随 ...
- Internal Server Error
Internal Server Error 说句实在的话,学习jQuery的路是很艰难的,解决某此问题的历程与浪费时间太多. 那些痛苦就不在此分享了. 在家里的电脑能够实现<使用jQuery的$ ...
- thinkphp空操作和配置文件实现简化路由
1关于TP中空操作和路由问题 <?php function test(){ $content="test demo @云峰天下"; $pattern='/@(\S+)\s/' ...
- SOCKET网络编程细节问题3
SOCKET网络编程快速上手(二)——细节问题(3) 3.SIGPIPE问题 人怕牺牲,我们写的程序也一样,人有死不瞑目,程序又何尝不是?程序跑着跑着,突然就崩掉了.好一点的牺牲前告诉你些打印,差点的 ...
- 一键保存网页为PDF
一键保存网页为PDF_V1.2 福利来了,“一键保存网页为PDF”发布以来最给力的功能来了: 1.支持大部分浏览器了(添加书签方式),测试IE8\IE9.谷歌.火狐可用: 2.转换组件“ephtm ...