（本内容部分节选自《HTML 5从入门到精通》)

对表单的验证

————————————————————————————————————————————————————————

•1、required属性

required属性主要目的是确保表单控件中的值已填写。在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字，提示用户这个元素中必须输入内容。

•2、pattern属性

pattern属性主要目的是根据表单控件上设置的格式规则验证输入是否为有效格式。对input元素使用pattern属性，并且将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式。当输入的内容不符合给定格式时，则不允许提交，同时在浏览器中显示信息提示文字，提示输入的内容必须符合给定格式。

例如下面所示，要求输入的内容必须为一个数字与三个大写字母。

<input pattern="[0-9][A-Z]{3}" name="mr" placeholder="输入内容：一个数字与三个大写字母。" />

•3、min属性与max属性

min与max这两个属性是数值类型或日期类型的input元素的专用属性，它们限制了在input元素中输入的数值与日期的范围。

•4、step属性

step属性控制input元素中的值增加或减少时的增量。例如当你想让用户输入的值在0与100之间，但必须是5的倍数时，你可以指定step为5.

1、checkValidity显式验证法:

form元素与input元素（包括select元素与textarea元素）都具有一个checkValidity方法 。调用该方法，可以显式地对表单内所有元素内容或单个元素内容进行有效性验证。如果你想覆盖浏览器默认的验证和反馈过程，可用之。checkValidity方法以boolean的形式返回验证结果。另外还要提到的是，在HTML5中，form元素与input元素都还存在一个validitystate 属性，该属性返回一个validitystate 对象。该对象具有很多属性，但最简单、最重要的属性为valid属性，它表示了表单内所有元素内容是否有效或单个input元素内容是否有效。

这样的效果：

   （IE上的效果）

这样的用法：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>使用checkValidity()方法显式验证表单</title>
  6 <script type="text/javascript">
  7 function CheckForm(frm){
  8     if(frm.myEmail.checkValidity()){        /* 显式验证邮件 */
  9         alert("邮件格式正确！");
 10     }else{
 11         alert("邮件格式错误！");
 12     }
 13 }
 14 </script>
 15 </head>
 16 <body>
 17 <div>
 18   <form action="" method="post">
 19     邮件：
 20     <input type="email" name="myEmail" id="myEmail" value="yxw740@163.com" />
 21     <br />
 22     <input type="submit" value="提交" onclick="return CheckForm(this.form)" />
 23   </form>
 24 </div>
 25 </body>
 26 </html>

显式验证

2、 setCustomValidity方法自定义错误信息

自定义错误提示信息的方法。

当默认的提示错误满足不了需求时，可以通过该方法自定义错误提示。当通过此方法自定义错误提示信息时，元素的validationMessage属性值会更改为定义的错误提示信息，同时ValidityState对象的customError属性值变成true。下面通过示例了解其使用方法。

效果：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>自定义错误提示信息</title>
  6 <script type="text/javascript">
  7 function CheckForm(frm){
  8     var name=frm.name;
  9     if(name.value==""){
 10         name.setCustomValidity("写名字再走，喂！");     /* 自定义错误提示 */
 11     }else{
 12         name.setCustomValidity("");                     /* 取消自定义错误提示 */
 13     }
 14 }
 15 </script>
 16 </head>
 17 <body>
 18 <div>
 19   <form action="" method="post">
 20     姓名：
 21     <input id="name" name="name" placeholder="First and Last Name" required />
 22     <input type="submit" value="提交" onClick="CheckForm(this.form)" />
 23   </form>
 24 </div>
 25 </body>
 26 </html>

自定义验证

ps:如果把邮件验证和姓名验证放在一起，一定是先验证邮件，再验证姓名，你说好玩不好玩

3、避免验证

如果不想浏览器验证你的表单，咋办？

用form元素的novalidate属性；可以关闭整个表单验证。

input元素或者submit元素的formnovalidate属性，可以对单个input元素失效。

另：submit的formnovalidate和form的novalidate等价

增加的页面元素

————————————————————————————————————————————————————————

figure 元素

用来表示网页上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生任何影响。figcaption元素表示figure 元素的标题。它从属于figure 元素，所以其必须书写在figure 元素内部，可以书写在figure 元素内的其他从属元素的前面或后面。一个figure 元素内最多只允许放置一个figcaption元素，但允许放置多个其他元素。

eg效果图：两个figure，带标题的

  1 <title>新增元素示例</title>
  2 </head>
  3     <figure>
  4         <figcaption>故事</figcaption>
  5     <br/>
  6     有很多时候，过不去的，是活着的人用对过往的缅怀来逃避没有未来的认知，<br/>
  7     第一年，会想着若他还在，这岁月将是怎样的不同；第二年习惯了他的不在，<br/>
  8     但难免伤怀少了他的滋味；第三年，对风花雪月的怀想，已不存在他的位置，<br/>
  9     他不在，已成定论。
 10     </figure>
 11     <hr color="#38ABD4" size="+1">
 12 <body>
 13     <figure>
 14         <img src="data:images/1.jpg" width="400"><br/>
 15         <figcaption>妖应封光</figcaption>
 16     </figure>
 17 </body>

figure

details元素

提供了一种替代JavaScrip的，它主要是提供了一个展开/收缩区域。例如如下的应用代码：

（目前只有 Chrome 和 Safari 6 支持 <details> 标签。）

<details><summary>百度百科</summary><p>百度百科，没啥好介绍的....</p>
</details>

Details元素具有一个属性“open”，使用<details open> 语句对details 添加该属性，添加该属性后在画面打开时details元素所表示的局部区域则会处于展开状态。

说明：details元素内并不限于放置文字，也可以在其内部放置表单、插件或对于一个统计图提供的详细数据表格。

mark元素

表示页面中需要突出显示或高亮显示的，对于当前用户具有参考作用的一段文字。它通常使用于引用原文的时候，目的是引起读者的注意。mark元素的作用相当于使用一支荧光笔在打印的纸张上标出一些文字。

说明：mark元素最主要的目的是吸引当前用户的注意，因为标示出来的文字与用户的当前操作有关，通常该元素对于当前用户具有很好的帮助作用。

能够体现mark元素作用的最好例子是对网页全文检索某个关键词时显示的检索结果，现在许多检索引擎用其他方法实现了mark元素所要达到的功能。

mark元素的另一个主要作用是在引用原文的时候，为了某种特殊目的而把原文作者没有特别重点标示的内容给标示出来。

mark元素与em、strong元素的区别：

开发者可能已经习惯于用em元素或strong元素来突出显示文字，但要注意mark元素的作用与这两个元素的作用是有区别的，不能混同使用。Mark元素的标示目的与原文作者无关，或者说它不是原文作者用来标示文字的，而是在后面引用的时候添加上去的，它的目的是吸引当前用户的注意力，提供给用户作参考，希望能够对用户有帮助。而strong是原文作者用来强调一段文字的重要性，例如警告信息、错误信息等，em元素是作者为了突出文章重点而使用的。

用法示例：

<mark>你要mark的内容</mark><summary><mark>明日科技</mark></summary>
<p><mark>明日科技</mark>，成立于1998年....</p>

Progress元素

HTML5标准草案中新增的元素之一。它表示一个任务的完成进度，这进度可以是不确定的，只是表示进度正在进行，但是不清楚还有多少工作量没有完成，也可以用0到某个最大数字（例如100）之间的数字来表示准确的进度完成情况（例如进度百分比）

该元素主要有两个属性：value属性表示已经完成了多少工作量，max属性表示总共有多少工作量。工作量的单位是随意的，不用指定。

注意：value和max属性的值必须大于0，value的值小于或等于max属性的值。

转载于:https://www.cnblogs.com/puluotiya/p/4855379.html

HTML5学习之二：HTML5中的表单2相关推荐

  1. html语言中的表单元素,HTML5中的表单元素有哪些

    摘要 腾兴网为您分享:HTML5中的表单元素有哪些,指南针,之了课堂,云端学习,易视云3等软件知识,以及挣钱花,猎豹浏览器本,移动彩铃,豆瓣音乐,mine,dnf雪人像素头补丁,偶像来了,许鲜网,长治 ...

  2. extjs 提交表单给php,JavaScript_Extjs学习笔记之二 初识Extjs之Form，Extjs中的表单组件是Ext.form.Basic - phpStudy...

    Extjs学习笔记之二 初识Extjs之Form Extjs中的表单组件是Ext.form.BasicForm,不过最简单最常用的是Ext.form.FormPanel控件,它继承自Panel,具有一 ...

  3. 掌财社:html5中AmazeUI框架中JS表单验证实战案例展示！

    今天和大家分享个有关于"html5中AmazeUI框架中JS表单验证实战案例展示!"这方面的相关内容知识,让大家对于html5中AmazeUI框架也可以有所了解! 1.需求 做一个 ...

  4. html5如何提交到邮箱,如何在html网页中提交表单直接发送到邮箱

    如何在html网页中提交表单直接发送到邮箱?此问题一直困扰了我很久很久,后来了解到jmail组件可以解决此问题,而且现在的付费空间基本都会有此组件.分别建立表单页和asp页面,提交表单后通过asp页面 ...

  5. 【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放

    导航 [初探HTML5之使用新标签布局]用html5布局我的博客页! [HTML5初探之form标签]解放表单验证.增加文件上传.集成拖放 [HTML5初探之绘制图像(上)]看我canvas元素引领下 ...

  6. （转）SpringMVC学习(十二)——SpringMVC中的拦截器

    http://blog.csdn.net/yerenyuan_pku/article/details/72567761 SpringMVC的处理器拦截器类似于Servlet开发中的过滤器Filter, ...

  7. JavaScript中的表单编程

    表单编程 1获取表单相关信息 1.什么是表单元素 1.什么是表单元素 在H TML中表单就是指form标签,它的作用是将用户输入或选择的数据提交给指定的服务器 2.如何获取表单元素 <form ...

  8. html语言中表格由什么组成,HTML中一个表单由什么组成

    在HTML中,一个完整的表单通常由表单元素(也称为表单控件).提示信息和表单域3个部分构成.表单元素包含了具体的表单功能项,如单行文本输入框.密码输入框.复选框.提交按钮.重置按钮等:表单域相当于一个 ...

  9. 用HTML制作表单表格能学到什么,Html学习之十七（表格与表单学习--排行版制作）...

    表格与表单01 table{ width: 300px; height: 40px; margin: 100px auto; border-collapse: collapse; } .th2{ fl ...

  10. JavaScript学习（六十八）—表单校验案例

    JavaScript学习(六十八)-表单校验案例 学习内容 (一).如何获取页面的元素-利用id获取 格式:var 变量名称 =document.getElementById('要获取的元素的id的值 ...

最新文章

  1. python函数调用位置_python函数定义,调用,传参,位置参数及关键字参数,返回值
  2. 车用TVS管 SM8S系列 国产替代
  3. boost::fusion::make_fused_procedure用法的测试程序
  4. mysql支持的平台和操作系统_MySQL 数据库所支持的操作系统_MySQL
  5. 【Python成长之路】从 零做网站开发 -- 基于Flask和JQuery，实现表格管理平台
  6. RISC-V学习资料：《手把手教你设计CPU——RISC-V处理器》
  7. 中兴B860AV2.1、1.1T、2.1-A-M-T，通刷线刷固件及教程
  8. 傅里叶级数、一维傅里叶变换到二维傅里叶变换数理推导
  9. ORA-01033问题：定位redo日志进行不完全恢复启库实战案例
  10. 【学习周记】学习之路，任重而道远
  11. Java基础——Arrays类的排序方法
  12. 华为云计算之rainbow迁移实验
  13. 第二章、application.properties文件的配置
  14. 平板电脑先锋W11安装Android,先锋w11官方固件
  15. RabbitmqCluster 磁盘不可用，disk space告警
  16. 解读趣头条Q4财报：营收同比增长25% 趣头条减速求稳
  17. 160个CrackMe 028 Cosh.2
  18. linux输入数字切换浏览器tab,js监听浏览器tab窗口切换
  19. 国内身份证号码的验证
  20. AdminEAP框架-基于AdminLTE的权限管理

热门文章

  1. sql语句中having的作用是？
  2. LVS原理详解（3种工作方式8种调度算法）--老男孩
  3. Office 365 系列之一：初识Office 365
  4. HDU 2080 夹角有多大II
  5. 数据结构之跳表Skiplist
  6. OCA读书笔记(9) - 管理数据同步
  7. java.lang.OutOfMemoryError: PermGen space及其解决方法
  8. 回击质疑 HP StoreOnce用高性能说话
  9. rman备份后为什么要同时备份归档日志
  10. Cornell University Designing with Microcontrollers