HTML5 表单验证

==============================================

1.required --- 必填字段验证

2.minlength, maxlength --- 字符长度验证

3.min, max --- 数值范围验证  用于number,range 和日期时间类型

4.step --- 步长验证

5.pattern --- 正则表达式验证

6.novalidate(form中) ---禁用表单验证

formnovalidate(submit中) ---禁用表单验证

<form action=" " method="post">

<div>用户名:<input type="text" minlength="3" maxlength="10" required></div>

<div>密码:<input type="password" minlength="6" maxlength="8" required></div>

<div>邮箱:<input type="email" pattern=" ^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$" required></div>

<div>日期:<input type="date" min="2016-02-05" max="2017-02-05" required> </div>

<div>订购数量:<input type="number" min="10" max="50" step="5" required> </div>

<div>音量:

<form oninput="out.value=in.value">

<input type="range" name="in" value="0">

<output name="out">0</output>

</form>

</div>

<input type="submit">

</form>

时间: 2024-12-21 19:27:08

HTML5 表单验证的相关文章

Html5之高级-3 HTML5表单验证(验证属性、验证状态)

一.验证属性 Required 属性 - Required 属性主要防止域为空时提交表单.该属性不需要设置任何值 - 语法: Pattern 属性 - Pattern 属性的作用是实现元素的验证.它支持使用正则表达式定制验证规则 - 语法: Min 和 Max 属性 - min.max和step属性用于为包含数字或日期的input类型规定限定(约束) - 语法: Minlength 和 Maxlength 属性 - Minlength 和 Maxlength 属性的作用是定制元素允许的最小字符数

实现跨浏览器html5表单验证

div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: right; clear: right; } .clearfix:after{ content: ""; display:block; clear: both; } .figcaption{ clear: both; color: #999; padding-top: 10px; text

jQuery html5Validate基于HTML5表单验证插件

一.前言 前3篇文章实际都是为本文做铺垫的,如果以下棋表示,前三篇是普通走棋,本篇是将军! 目前市面上有不少表单验证插件,看似强大,实在糟糕! 总结下,有以下一些问题: 过多干预包括:改变了表单元素UI, 为表单元素绑定过多事件等 布局等限制包括:需要特定结构的布局,需要特定的类名或者ID 学习成本包括:N多元作者自定义的属性,或者自定义的特定的数据结构 可用性 当JS出现错误的时候而无法正常运作的时候,验证就是聋子的耳朵——摆设,即使在现代浏览器下也是如此. 面向未来的表单验证 验证驱动验证信

不支持html5表单验证新特性的解决方案

下载 Alexander Farkas编写的“Webshims Lib”(http://afarkas.github.com/webshim/demos/)它可用于插入表单补丁(也可以为其他 HTML5特性打补丁),从而使不支持新特性的浏览器可以处理 HTML5 表单. 使用方法: a.下载 Webshims Lib(http://github.com/aFarkas/webshim/downloads)并解压: b.将其中的 js-webshim 文件夹复制到相应的位置: <script sr

html5表单验证(Bootstrap)

邮箱验证: <input name="email" type="text" placeholder="必填项" class="input-xlarge" required pattern="^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$" title="邮箱正确格式:[email protecte

html5表单验证消息框

Email <!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .ema

HTML5 web Form表单验证实例

HTML5 web Form 的开发实例! index.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>HTML5表单验证</title> 6 <link rel="stylesheet" type="text/css" href="../css/style.

HTML5实战应用:如何让表单验证更友好

HTML5表单验证给前端人员带来了便利,但是在用户体验上存在一些缺陷,默认的提示对用户很不友好,无法准确的获取想要的信息.好在大牛们在接口设计的时候提供了setCustomValidilty方法可以自定义提示信息.这是一个好消息,但也存在一些弊端,需要让开人员做额外的一些处理才达到真正想要的目的. 接下来通过以下示例来阐述方法的应用. 未调用setCustomValidity)方法!DOCTYPE html> html hea ata charset="utf-8 titleform te

AngularJS复习------表单验证

在AngularJS中能够将HTML5表单验证功能同自己的验证指令结合起来使用,这里介绍使用的核心功能. 使用表单验证,首先要确保表单的每个控件都有name属性 如果想要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加novalidate标记. 必填项:只需要在输入字段元素上添加HTML5标记 required即可 最小长度:在输入字段上使用AngularJS指令ng-minlength="{number}" 最大长度:在输入字段上使用AngularJS指令ng-maxlength