HTML5新增元素、属性以及表单，正则表达式

HTML5新增元素及其属性

HTMl5新增标签，有语义，可以更容易被搜索到。
常见的有以下几种标签元素，所有的新增元素可以w3cschool手册查看。

HTML5新增结构元素

结构标签 描述 header 页面或页面中某一个区块的页眉，通常是一些引导和导航信息。 nav 可以作为页面导航的链接组 section 页面中的一个内容区块，通常由内容及其标签组成 article 代表一个独立的、完整地相关内容快，可独立于页面其他内容使用 aside 非正文的内容，与页面的主要内容是分开的，被删除而不会影响到网页的内容 footer 页面或页面中某一个区块的脚注

结构标签具体用法不详细描述。

HTML5新增网页元素

网页元素标签 描述 video 定义视频，如影片或者其他视频 audio 定义音频 canvas 定义图形 datalist 定义可选数据的列表 time 标签定义日期或时间 mark 在视觉上向用户呈现那些需要突出的文字 progress 运行中的进度（进程）

video，audio和canvas后面再具体详细描述。

mark

<p>测试<mark>mark</mark>标签</p>

datalist

    <input type="text" list="test">    <datalist id="test">        <option value="1">the first</option>        <option value="2">the second</option>        <option value="3">the third</option>    </datalist>

选择后value的值会填入text框，后面的可以是对值的说明。

progress

<p><progress ></progress></p> <p><progress value="20" max="100"></progress></p>

上面没有填属性的对应对第一个样式，是动态的
第二个样式是有值的情况下对应的进度条

time
不多说了，主要是语义化。

HTML5废除的元素

• 能用CSS替代的元素：<big> <center> <font> <s> <u> <strike>等
• 不再使用frame框架
• 只有部分浏览器支持的元素：<applet> <blink> <bgsound> <marquee>等
• 其他被废除的元素：<rb> <dir> <isindex> <listing> <nextid>等

HTML5新增全局属性

全局属性 描述 contentEditable 规定是否允许用户编辑内容，布尔型属性 designMode 规定整个页面是否编辑，需要js来实现，布尔型属性 hidden 规定对元素进行隐藏 spellcheck 规定是否必须对元素进行拼写或语法检查，布尔型属性 tabindex 规定元素的tab键迭制次序

    <p>contenteditable</p>    <p contenteditable="true">可编辑的行</p>    <p>hidden</p>    <p hidden="hidden">被我隐藏了</p>    <p>tabindex</p>    <p>        <input type="text" tabindex="3">        <input type="text" tabindex="2">        <input type="text" tabindex="1">    </p>    <p></p>    <!-- <script>        document.designMode="on";//打开全部可编辑        document.designMode="off";//关闭全部可编辑    </script> -->

HTML5新 增表单元素及其运用

HTML5新增input类型

input类型 描述 email 电子邮箱地址文本框，提交表单时会自动验证email的值 url 网页的URL，提交表单时会自动验证URL的值 number 只包含数值的字段，能够设定对所接受的数字的限定 range 滑动条，特定值范围内的数值选择器 search 用于搜索引擎（搜索框） Date pickers 拥有多个可供选取日期的新输入类型

新增input属性

input类型 描述 autofocus 页面加载时自动获取焦点 required 规定输入域不能为空 placeholder 提供一种提示（hint），输入域为空时显示，获得焦点时消失 pattern 规定验证input域的模式（正则表达式） height、width 仅适用于image类型的input标签的图像高度和宽度

validityState对象

Validity属性获取表单元素的validityState对象，改对象包括8个方面的验证结果
var validityState=document.getElementById("uName").validity;
HTML5中querySelector()来获取元素

属性 描述 valueMissing 必填的表单值为空 typeMismatch 输入值与type类型不匹配 patternMismatch 输入值与pattern特性的正则不匹配 tooLong 输入内容超过限定长度 rangeUnderflow 输入值小于min特性的值 rangeOverflow 输入值大于max特性的值 stepMismatch 输入值不符合step特性规则 customError 使用自定义验证错误提示信息

valueMissing
目的：确保表单中的值已填写
用法：将表单元素设置了ruquired特性，则为必填项；如果必填项输入值为空，valueMissing属性会将返回true，否则返回false。
<input type="text" required="required"/>

typeMismatch
目的：保证输入值与预期类型相匹配（url、email等）
用法：指定表单控件的type特性值，如输入值不符合对应的表单类型，typeMismatch属性会将返回true，否则返回false。

patternMismatch
目的：根据表单元素设置的格式规则验证输入是否为有效格式
用法：在表单元素的上设置pattern特性，并赋予适当的匹配规则，如输入值不符合验证模式规则，patternMismatch属性会将返回true，否则返回false。

setCustomValidity，提示内容
invalid 事件：只要发生表单验证，所有未通过验证的表单元素都会触发一个invalid事件。

<div class="body">        <form action="#" method="post">            <h2><span></span>注册账号</h2>            <div class="table">                <div class="table-row">                    <div class="table-cell"><label for="nickname"><span>*</span>昵称：</label></div>                    <div class="table-cell"><input type="text" autofocus="autofocus" placeholder="英文、数字长度为6-10个字符" name="nickname" id="nickname" required pattern="[A-z0-9]{6,10}"></div>                </div>                <div class="table-row">                    <div class="table-cell"><label for="password"><span>*</span>密码：</label></div>                    <div class="table-cell"><input type="password" placeholder="长度为6-16个字符" name="password" id="password" required pattern="[A-z0-9]{6,16}">                        </div>                </div>                <div class="table-row">                    <div class="table-cell"><label for="tel"><span>*</span>手机号码：</label></div>                    <div class="table-cell"><input type="tel" placeholder="以13|14|15|17|18开头" name="tel" id="tel" required pattern="^1[34578][0-9]{9}$">                        <span class="tel-tip">忘记密码时可用手机号找回密码</span></div>                </div>                <div class="table-row">                    <div class="table-cell"><label for="email"><span>*</span>邮箱：</label></div>                    <div class="table-cell"><input type="email" name="email" id="email" required></div>                </div>                <div class="table-row">                    <div class="table-cell"><label for="age">年龄：</label></div>                    <div class="table-cell"><input type="age" name="age" id="age"></div>                </div>                <div class="submit-box">                    <button id="submit">立即注册</button>                </div>                <div style="height:1px;"></div>            </div>        </form>    </div>    <script>        var form = document.querySelector("form");        form.addEventListener("invalid", function (e) {            var target_element = e.target;            var valid = target_element.validity;            var name = target_element.name;            switch (name) {                case "nickname":                    if (valid.valueMissing) {                        target_element.setCustomValidity('昵称不能为空');                    } else if (valid.patternMismatch) {                        target_element.setCustomValidity('昵称必须为英文、数字长度为6-10个字符');                    } else {                        target_element.setCustomValidity("");                    }                    break;                case "password":                    if (valid.valueMissing) {                        target_element.setCustomValidity('密码不能为空');                    } else if (valid.patternMismatch) {                        target_element.setCustomValidity('密码长度必须为6-16个字符');                    } else {                        target_element.setCustomValidity("");                    }                    break;                case "tel":                    if (valid.valueMissing) {                        target_element.setCustomValidity('手机号不能为空');                    } else if (valid.patternMismatch) {                        target_element.setCustomValidity('请输入正确的手机号');                    } else {                        target_element.setCustomValidity("");                    }                    break;                case "email":                    if (valid.valueMissing) {                        target_element.setCustomValidity('y邮箱不能为空');                    } else if (valid.typeMismatch) {                        target_element.setCustomValidity('请输入正确的邮箱');                    } else {                        target_element.setCustomValidity("");                    }                    break;                default:                    break;            }        }, true)    </script>

valid伪类
input:valid 验证通过的样式，如上图红色框框
input:invalid 验证未通过的样式，如上图绿色框框

正则表达式

正则表达式
又称正规表示法、常规表示法：使用单个字符串来描述、匹配一系列符合某个句法规则。在很多文本编辑器里，正则表达式通常被用来检索、替换那些符合某个模式的文本。
RegExp对象用于规定在文本中检索的内容
测试工具：http://tool.oschina.net/regex/
使用正则表达式
新建一个RegExp对象：
var reg=/pattern/attributes;
var reg=new RegExp(pattern,attributes);
修饰符：

• i：执行对大小写不敏感的匹配；
• g：执行全局匹配 （查找多有匹配而非在找到第一个匹配后停止）；
• m：执行多行匹配。

正则表达式量词详见w3cschool手册

分类 量词 描述 元字符 . 匹配任何字符，除换行符（newline） 元字符 \d 匹配任何数字字符 元字符 \s 匹配空格 元字符 \w 匹配任何字母数字（字母或数字）字符 元字符 ^ 字符串需以模式起始 元字符 $ 字符串需以模式结束 限定符 * 限定符前的子模式必须出现0次或多次 限定符 + 限定符前的子模式必须出现1次或多次 限定符 ? 限定符前的子模式必须出现1次或0次 限定符 {n} 限定符前的子模式必须出现n次 限定符 ( ) 集合字符或/和元字符为子模式 元字符 | 选替（这个或那个） 字符类 [ ] 一组匹配单一字符的规则

常用方法：

方法 描述 reg.test(string) 测试正则表达式是否匹配字符串 reg.exec(string) 逐个匹配，并返回当前结果，每次只返回一个数据

String类中可以支持正则的方法：

方法 描述 search 检索与正则表达式相匹配的值 match 找到一个货多个正则表达式的匹配 replace 替换与正则表达式匹配的子串 split 把字符串分割为字符串数组

表单验证
表单提交时会触发submit事件
当submit事件返回false时可以阻止提交
第一种方式

    <form action="#" method="post" onsubmit="return validate();" id="from">        <input type="submit">    </form>    <script>         function validate(){             return false;   //false 会传到onsubmit上         }    </script>

第二种方式

    <form action="#" method="post"  id="form">        <input type="submit">    </form>     <script>        var form = document.querySelector("#form");        form.addEventListener("submit", function (e) {            e.preventDefault();   //阻止事件发生            }, true)    </script> 

本博客仅用于记录web前端学习情况