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前端学习情况