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自带表单验证的更多相关文章

  1. [H5表单]html5自带表单验证体验优化及提示气泡修改

    慕课网之前录制的视频,js/jquery各种宽高的理解和应用,最近终于上线了.还有一个html5左侧导航没有上线!最近慕课网系列课程让我录制一个html5表单验证的课程.今天就稍微说一下表单验证!另外 ...

  2. html5自带表单验证

    起因:今天无意中发现chrome的input框自带表单验证!于是就去试试firefox,惊奇的发现也有自带的验证提示,只不过两者的样式不一样 chrome中的样子: firefox中的样子: 发散:具 ...

  3. html5自带表单验证-美化改造

    神奇的代码 暂且叫做html5.css /* === HTML5 validation styles === */ .myform select:required, .myform input:req ...

  4. 纯H5+c3实现表单验证

    客户端验证是网页客户端程序最常用的功能之一,我们之前使用了各种各样的js库来进行表单的验证.HTML5其实早已为我们提供了表单验证的功能.至于为啥没有流行起来估计是兼容性的问题还有就是样式太丑陋了吧. ...

  5. 用html5自带表单验证 并且用ajax提交的解决方法(附例子)

    用submit来提交表单,然后在js中监听submit方法,用ajax提交表单最后阻止submit的自动提交. 在标准浏览器中,阻止浏览器默认行为使用event.preventDefault(),而在 ...

  6. JS判断字符串长度，结合element el-input el-form 表单验证（英文占1个字符，中文汉字占2个字符）

    首先看看判断字符串长度的几种方法(英文占1个字符,中文汉字占2个字符) 方法一: function strlen(str) { var len = 0; for (var i = 0; i < ...

  7. JS常见的表单验证，H5自带的验证和正则表达式的验证

    H5验证 自带的验证无法满足需求: <form action="" method="get"> name:<input type=" ...

  8. H5: 表单验证失败的提示语

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

  9. ng自带的表单验证

    几点注意:使用ng的表单验证,需要给form,input,textarea一个name 要求:验证输入框的内容(长度,正则,必填,),当验证不通过的时候,就禁用提交按钮 使用的验证:ng-maxlen ...

随机推荐

  1. javascript模仿块级作用域(第一篇)

    作用域有词法作用域和块级作用域之分,javascript属于词法作用域,而在java.C++中却是块级作用域.在javascript中,只有函数能够创建作用域,作用域是以function作为边界的. ...

  2. Windows平台分布式架构实践负载均衡

    Windows平台分布式架构实践 - 负载均衡 概述 最近.NET的世界开始闹腾了,微软官方终于加入到了对.NET跨平台的支持,并且在不久的将来,我们在VS里面写的代码可能就可以通过Mono直接在Li ...

  3. 基于嵌入式OS的任务设计-----任务划分

    在<前后台系统VS嵌入式OS,何时该上OS?>一文中介绍了何时应该将OS应用于嵌入式设计中,本文将介绍基于OS的任务设计,一般来说,应用程序设计包括两个方面,一个是业务逻辑的设计,另一个是 ...

  4. NPOI 2.0 Excel读取显示

    NPOI 2.0 Excel读取显示   最近接到需求,需要把excel表格里的数据原样展示到web页面,主要是满足随意跨行跨列. 之前用过一点NPOI,不过接触的不太多,趁这次机会再熟悉一下.由于操 ...

  5. Easyui布局

    Easyui入门视频教程 第03集---Easyui布局 Easyui入门视频教程 第03集---Easyui布局 目录 -----------------------   Easyui入门视频教程 ...

  6. 运动检测（前景检测）之（一）ViBe

    运动检测(前景检测)之(一)ViBe zouxy09@qq.com http://blog.csdn.net/zouxy09 因为监控发展的需求,目前前景检测的研究还是很多的,也出现了很多新的方法和思 ...

  7. Weka 开发［1］－Instances类

    先google一下,把Weka软件下载下来,安装完成之后,在Weka的安装目录中有一个weka.jar的包. 把包添加到工程中后,就可以调用weka中的函数了. 再介绍一点weka的基本知识,在wek ...

  8. 通过实体反射实现CriteriaQuery并列条件查询

    将实体反射之后获取查询字段的值,并添加到Predicate对象数组中 public Predicate getPredicateAnd(T entity, Root<T> root, Cr ...

  9. jQuery的delegate

    jQuery的delegate 在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方, ...

  10. 利用HttpWebRequest和HttpWebResponse获取Cookie并实现模拟登录

    利用HttpWebRequest和HttpWebResponse获取Cookie并实现模拟登录 tring cookie = response.Headers.Get("Set-Cookie ...