HTML5实战与剖析之表单那些事儿

Biegral 2018/11/20 19:29:21 1767

转自：http://www.2cto.com/kf/201402/279077.html

HTML5针对表单方面也做了一些完善，新添加了一些验证数据的功能，新添加了一些标签属性。有了这些验证功能，就可以不用JavaScript进行验证，哪怕是JavaScript被禁用了也可以毫无压力的验证表单了。开发人员不用JavaScript，浏览器会根据标记中的规则执行验证，然后显示适当的错误信息。这些人性化的功能在支持HTML5的浏览器中才能有效，支持的浏览器有Opera 10+、Safari 5+、Chrome和Firefox 4+。

　　HTML5新添加的表单功能有：其他输入类型、输入模式、数值范围、必填字段、禁用验证和检测有效性。下面我们将对这几个功能进行详细展开介绍。


　　1、其他输入类型


　　说到输入类型，大家很快的就会想到input标签。只有input标签才可以规定不同的类型。HTML5恰恰就是在input中的type属性添加了一些新的属性值。这些新的属性值不仅可以反映数据类型的信息，还可以提供一些默认的验证功能。其中，”email”和”url”是两个得到支持最多的类型，各浏览器也为它们增加了定制的验证机制。新添加的类型如下


　　email : 电子邮箱文本框，跟普通的没什么区别，当输入不是邮箱的时候，验证通不过。移动端的键盘会有变化

　　tel : 电话号码

　　url : 网页的URL

　　search : 搜索引擎。chrome下输入文字后，会多出一个关闭的X

　　range : 特定范围内的数值选择器，min、max、step( 步数 )

　　number : 只能包含数字的输入框

　　color : 颜色选择器

　　datetime : 显示完整日期

　　datetime-local : 显示完整日期，不含时区

　　time : 显示时间，不含时区

　　date : 显示日期

　　week : 显示周

　　month : 显示月


　　小例子HTML代码


?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form action="http://www.baidu.com">
    <input type="email">
    <input type="tel">
    <input type="url">
    <input type="search">
    <input type="range" min="0" max="10" step="2">
    <input type="number">
    <input type="color">
    <input type="date">
    <input type="datetime">
    <input type="datetime-local">
    <input type="time">
    <input type="month">
    <input type="week">
    <!-- placeholder是让密码输入框拥有默认提示 -->
    <input type="password" placeholder="请输入密码">
    <input type="submit">
</form>


　　2、输入模式


　　HTML5不仅新添加了一些新的输入类型，还添加了新的属性——patten属性。Patten属性的值是一个正则表达式，是用于匹配文本框中的值。在写正则的时候要注意，开头和结尾不用加^和$符号(假定已经有了)。这两个符号表示输入的值必须是从头到尾与模式匹配。小例子如下


　　HTML代码


?
1
2
3
4
5
<form action="#">
    <input type="text" name="user" pattern="\d{1,9}">
    <!-- 点击之后 会本页面提交-->
    <input type="submit">
</form>


　　Chrome预览效果


HTML5实战与剖析之表单那些事儿


　　3、数值范围


　　除了”email”和”url”，HTML5还定义了另外几个输入元素。这几个元素都要求填写某种基于数字的值。但是浏览器对这些新添加的值兼容性并不是很好。所以对这些数值类型的输入元素，可以指定min属性(最小的可能值)、max属性(最大的可能值)和step属性(从min到max的两个刻度之间的差值)。小例子如下


　　HTML代码


?
1
<input type="range" min="0" max="10" step="2" id="range">

　　JavaScript代码


?
1
2
3
4
5
var oInput=document.getElementById("range");
oInput.stepUp() //每次加1
oInput.stepUp(5) //每次加5
oInput.stepDown() //每次减1
oInput.stepDown(10) //每次减10

　　4、必填字段


　　在表单字段中指定required属性，即可提示用户这是为必填项不能为空。这个属性适用于input标签，textarea标签，select标签(Opera 12+支持)。在JavaScript中通过对于的required属性，可以检测表单是否为必填项。

　　对于空着的必填字段，不同浏览器的处理方式不同。Opera 11和Firefox 4会阻止表单提交病在相应字段下面弹出帮助框，Chrome(9之前)和Safari(5之前)则什么都不做也不阻止表单提交。小例子如下


　　HTML代码


?
1
<input type="text" id="text" required="">

　　JavaScript代码


?
1
2
3
//检验是否支持必填属性
//支持的为true ，不支持的为false
var is = "required" in document.createElement("input");


　　5、禁用验证


　　通过在form标签中添加novalidate属性，可以让表单不自行验证。JavaScript中可以使用novalidate获取，若存在则是true，反之则是false。如果提交按钮有多个，为了指定点击某一个提交按钮不必验证表单，可以在相应的按钮上添加formnovalidate属性。也可用JavaScript添加禁用验证的属性。小例子如下


　　HTML代码


?
1
2
3
4
5
6
7
8
<form action="http://blog.csdn.net/lee_magnum">
    <input type="text" id="text" required="">
    <input type="submit" value="跳过验证，直接提交" formnovalidate="">
</form>
<form action="http://blog.csdn.net/lee_magnum" novalidate="">
    <input type="text" id="text" required="">
    <input type="submit" value="直接提交">
</form>


　　6、检测有效性，及新添属性和方法


　　在JavaScript中使用checkValidity()方法可以检测表单中的某个字段是否有效。所有表单字段都有这个方法，如果字段的值是有效的，这份方法会返回true，否则则是false。与checkValidity()方法相比，validity属性可以告诉你很多东西。


　　valueMissing : 输入值为空时

　　typeMismatch : 控件值与预期类型不匹配

　　patternMismatch : 输入值不满足pattern正则

　　tooLong : 超过maxLength最大限制

　　rangeUnderflow : 验证的range最小值

　　rangeOverflow：验证的range最大值

　　stepMismatch: 验证range 的当前值 是否符合min、max及step的规则

　　customError： 不符合自定义验证，是否设置setCustomValidity(); 自定义验证

　　placeholder : 输入框提示信息

　　autocomplete : 是否保存用户输入值。默认为on，关闭提示选择off

　　autofocus : 指定表单获取输入焦点

　　list和datalist : 为输入框构造一个选择列表。list值为datalist标签的id

　　Formaction : 在submit里定义提交地址



　　小例子JavaScript代码


?
1
2
3
4
5
6
7
if(input.validity && !input.validity.valid){
    if(input.validity.valueMissing){
        alert("不能为空")
    }else if(input.validity.typeMismatch){
        alert("控件值与预期类型不匹配");
    }
}



　　HTML5实战与剖析之表单那些事儿就为大家介绍到这里，有了表单自行验证，JavaScript的工序又会变得少之又少，对开发人员来说真是件没事儿。更多有关HTML5的相关内容尽在梦龙小站，欢迎大家关注哟。







本文转载:CSDN博客

阅读排行

分类

归档