Tag标签 | 收藏本站 | 设为首页 | 参考书籍 | web前端技术交流①群:WEB前端技术交流群 会员登录 | 会员注册

首页文字描述

会员投稿 RSS订阅 专注web前端: 要么读书、要么旅行,身体和精神必须要有一个在路上。【每天一小步,成功一大步】
搜索: 您的位置主页 > HTML5 > Forms API之HTML5表单验证
隐藏/显示侧边栏

Forms API之HTML5表单验证

2015-07-29 16:34    来源:未知    责任编辑:admin    字号【
HTML5 Forms核心概念:规范的核心是功能性动作和语义,而非外观和显示效果。

(一)HTML5表单包含了大量新的API和元素类型,分为两类:

1、新的输入型控件:

    tel                电话号码                          

    email           电子邮箱地址文本框

    url                网页URL

    Search         用于搜索引擎

    range           特定值范围内的数值选择器,典型用法是滚动条

    number        只包含数值的字段

output标签,专门针对显示range控件的值;

progress标签,显示进度条。

eg:    <input type="email">

         <input type="range" min="18" max="120" onchange="display.value=value">   <output id="display">

        <progress value="30" max="100"><progress>

其他列入规范但尚未广泛支持的元素:

    color                    颜色选择器

    datetime             显示完整日期时间,包括时区选择

    datetime-local    显示日期和时间,不包括时区

    time                   不包含时区时间选择器和指示器

    date                   日期选择器

    week                  周选择器

    month                月选择器

2、新的函数和特性:

(1)placeholder:输入型控件在用户还没输入值时候,向用户显示描述性说明或者提示信息。

    <input name="name" placeholder="Your Name">

(2)autocomplete:浏览器通过autocomplete知晓是否应该保存输入值以备后用(on:可保存,off:不可保存)。

    <input type="text" autocomplete="off">

(3)autofocus:通过该特性让某个表单元素获取焦点,如果设置多个,相当于未指定。

    <input type="search" autofocus>

(4)spellcheck:对带有文本内容的输入控件进行拼音检查。

    <textarea id="myYextarea" spellcheck="true">

(5)list和datalist:为某输入型控件构造选值表

    <datalist id="contactList">

        <option value="xxx@xx.com">

        <option value="conghua@163.com">

    </datalist>

    <input type="text" id="contact" list="contactList">

(6)min和max:将range数值输入范围限度最低和最高之间。

    <input id="congidence" name="level" type="range" min="0" max="100" value="0">

(7)step:指定输入值递增和递减的粒度,值只可以为粒度的倍数。

   <input id="congidence" name="level" type="range" min="0" max="100" value="0" step="5">

(8)ValueAsNumber:完成控件值类型在文本和数值间的相互转换。

    document.getElementById("confidence").ValueAsNumber(65) ;

(9)required:添加特性为表单必填项。

    <input type="text" id="name" required>

(二)表单验证

表单验证,就是一套系统,为终端用户检测无效的控件并标志这些错误,就是在提交服务器之前对其进行一系列的检查并通知用户纠正错误。

通过反馈验证状态的ValidityState对象的valid状态获取验证结果。    $("id").validity.valid

八种用于表单验证约束条件:

1、valueMessing:确保表单控件值已填写;

2、typeMismatch:保证控件值与预期类型匹配;

3、patterMismatch:根据表单设置格式规则输入是否为有效格式;

4、tooLong:避免输入过多字符;

5、rangeUnderflow:限制数值控件最小值;

6、rangeOverflow:限制数值最大值;

7、stepMismatch:确定输入符合min、max和step设置;

8、customError:处理应用代码明确设置几计算产生的错误。

更多
Tags 标签: HTML5 HTML5表单验证
责任编辑:admin
最新图文列表
设为首页 | 加入收藏 | 关于我们| 版权声明 | 在线留言 | 网站地图 |