在HTML5中增加了许多新的功能,用于表单提交到服务器之前对表单进行数据的验证(抢了javascript的饭碗),有了这些功能,即便是javascript没有加载进来还是可以确保基本的验证。换句话说,浏览器自己会根据标记中的规则执行验证,然后自己显示适当的错误消息。当然,这些功能既然是来自HTML5 的,当然只能在支持HTML5这部分的内容的浏览器才有效,所以请我们看向未来的眼光来学习下面的这些个功能。

    1. 必填字段 在表单中指定required字段,凡是标注有required的字段在提交表单时值都不能为空。这个属性适用于<input>、<textarea>和<select>字段。(opera11及之前的版本还不支持<select>的required属性)。

      <form action="post">
      <label for="ele1">约束必填字段:</label><input id="eleOne" type="text" name="username" required>
      <button type="submit">submit</button>
      </form>

      在chrome下有如下提示:

      可以使用如下代码检测浏览器的支持性

      var isRequiredSuppored = "required" in document.createElement("input"); 

      dfdsfsfsdfsdfsdfsdfsdfsdfasdfsdfasdfasdfasdfasdf

    2. 其他输入类型
      HTML5为input元素的type属性又增加了几个值。这些新类型不仅能反映数据类型的信息,而且还能提供一些默认的验证功能,其中“email”和“url”是两个得到支持最多的类型,浏览器为他们提供了验证机制。
      <form action="post">
      <label for="ele2">其他输入类型:</label><br>
      <input type="email" name="email"><br>
      <input type="url" name="url"><br>
      <button type="submit">submit</button>
      </form>

      在chrome有如下提示:

      提示:浏览器只能简单验证其输入的格式并不能验证它的有效性。
      可以用以下方式来检测浏览器是否支持

      var input = document.createElement("input");
      input.type="email";
      var isEmailedSuppored = (input.type = "email");
    3. 数值范围
      HTML5还给type定义了其他属性“number”、“range”、“datatime”、“datatime-local”、“data”、“month”、“week”、“time”。对于这些数值类型的输入元素,可以指定min属性(最小的可能值)、max属性(最大的可能值)和step属性(从min到max的两个刻度间的差值)
      <form action="post">
      <label for="ele3">数值范围:</label><input type="number" min="0" max="10" step="2"><br>
      <button type="submit">submit</button>
      </form>

      在不同的浏览器中可能会看到能够自动递增递减的按钮(如图),因浏览器而异。

    4. 输入模式
      HTML5为文本新增了pattern属性。这个属性的值是一个正则表达式,用于匹配文本框中的值
      <form action="post">
      <label for="ele4">输入模式:</label><input type="text" pattern="\d+" name="count"><br>
      <button type="submit">submit</button>
      </form>


      注意:模式的开头和末尾不用加^和$符号(假定已经有了)。这两个符号表示输入的值必须从头到尾都与模式匹配。
      使用以下代码可以检测浏览器是否支持pattern属性。

      var isPatternSuppored = "pattern" in document.createElement("input");
    5. 禁用验证
      通过设置novalidate属性,可以告诉我们表单不进行验证。
      <form method="post" action="XXX.php" novalidate>
      <!--这里插入表单元素->
      </form>

      如果一个表单中有多个提交按钮,为了指定点击某个提交按钮不必验证表单,可以在响应的按钮上添加formnovalidate属性。

      <form method="post" action="XXX.php" novalidate>
      <!--这里插入表单元素->
      <input type="submit" value="submit">
      <input type="submit" value="NOsubmit" formvalidate>
      </form>

HTML5对表单的约束验证的更多相关文章

  1. HTML5对表单的一些有意思的改进

    HTML5对表单进行了许多的改进,在这篇文章中,我选择了其中个人认为很有趣的三个变化:自动聚焦,对button元素的改进,把表单元素与非父元素的form表单挂钩进行简单的介绍. 1. 自动聚焦 自动聚 ...

  2. jQuery html5Validate基于HTML5表单 异步服务器端验证

    1. HTML5 自带的Validate 很漂亮,很好用, 但是一定要在form里用submit按钮,才生效 <form id="frmInfo" action=" ...

  3. jQuery html5Validate基于HTML5表单验证插件

    更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...

  4. HTML5中表单验证的8种方法(转)

    在深人探讨表单验证之前,让我们先思考一下表单验证的真实含义.就其核心而言,表单验证是一套系统,它为终端用户检测无效的控件数据并标记这些错误.换言之,表单验证就是在表单提交服务器前对其进行一系列的检查并 ...

  5. Javascript高级编程学习笔记(78)—— 表单(6)HTML约束验证API

    自动切换焦点 使用JS可以极大地提升表单的易用性 其中最常用的一种就是当用户填写完当前字段后焦点自动切换到下一个字段 以下方的HTML代码为例: <input type="text&q ...

  6. HTML5中表单验证的8种方法

    HTML5中表单验证的8种方法 2012-4-21 11:00| 发布者: benben| 查看: 2765| 评论: 0 摘要: 前一篇,我们介绍了HTML5中新的表单特性和函数, 今天就继续来谈谈 ...

  7. HTML5表单验证(4个实用的表单美化案例)

    multipart/form-data 在使用包含文件上传控件的表单时,必须使用autocomplete="on" 自动补全功能novalidate 不验证 <form en ...

  8. 实现跨浏览器html5表单验证

    div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...

  9. html5表单验证

    表单验证为终端用户检测无效的数据并标记这些错误,是一种用户体验的优化. 下面展现浏览器自带的验证功能也可在移动端中查看: HTML部分: <!DOCTYPE html> <html ...

随机推荐

  1. UITableView 右侧索引

    1.设置右侧索引字体颜色 self.tabView.sectionIndexColor = [UIColor blackColor]; 2.设置右侧索引背景色 self.cityTabView.sec ...

  2. python中TCP和UDP区别

    TCP(Transmission Control Protocol)可靠的.面向连接的协议(eg:打电话).传输效率低全双工通信(发送缓存&接收缓存).面向字节流.使用TCP的应用:Web浏览 ...

  3. js面对对象编程

    说到js,非常大一部分人会说我非常熟悉,在日常的web开发中经经常使用,那么你的js代码是符合面对对象思路的吗?那你会问我面向过程的js代码有什么不好吗?我的感受是面对对象的js编码更加简洁,降低了混 ...

  4. Js 抱错:::SyntaxError: identifier starts immediately after numeric literal

    SyntaxError: identifier starts immediately after numeric literal 今天写了个onclick()方法,有这样的一个变量4028b88161 ...

  5. php7下 xhprof安装与使用

    需要测试下 代码的性能,使用了 xhprof + xhgui 1. 下载xhprof, 这里下载吧 :https://github.com/longxinH/xhprof.git 2, 安装 cd x ...

  6. 电脑Svchost.exe 进程占CPU100% 的解决办法

    Windows Update诊断和修复修复工具 http://support.microsoft.com/mats/windows_update/zh-cn Svchost.exe占用CPU100%的 ...

  7. [Java面试一]Spring总结以及在面试中的一些问题.(转发:http://www.cnblogs.com/wang-meng/p/5701982.html)

    1.谈谈你对spring IOC和DI的理解,它们有什么区别? IoC Inverse of Control 反转控制的概念,就是将原本在程序中手动创建UserService对象的控制权,交由Spri ...

  8. Intel Quick Sync Video Encoder 2

    这边博客主要记录在预研quick sync中涉及到的一些性能质量相关的关键参数设置. github: https://github.com/MarkRepo/qsve 1. VPP处理过程伪代码: M ...

  9. sqlalchemy——多表操作

    一对多:一对一 # one -- many class Students(Base): __tablename__ = "students" sid = Column(Intege ...

  10. 转 Oracle 11g服务详细介绍

    转自http://www.cnblogs.com/userWuLiang/archive/2013/04/13/3017900.html Oracle 11g服务详细介绍及哪些服务是必须开启的? 成功 ...