H5小内容(一)
HTML5目前最新的规范(标准)是2014年10月推出
2005年左右出现HTML5版本(非标准)
W3C组织(两个组织定义H5规范)
学习(研究)HTML5是学习未来(将来主流)
HTML版本 - 第一阶段主要学习还是4版本(包含5版本)
<header><nav>
HTML5版本之后,声明不再出现版本信息
有意地版本,以后可能不再会有新版本
HTML5的规范内容实时更新
注意
HTML5永远都不可能离开javascript.
HTML5在移动端支持好于PC端
HTML5新表单
input新类型
email类型 - 验证是否包含"@"
url类型 - 验证是否包含"http://"
tel类型 - 只在移动端显示
number类型
range类型
date类型
color类型
表单新元素
datalist元素
progress元素
meter元素
output元素
表单新属性
placeholder - 提供默认提示内容
multiple - 允许输入多个值
多个值之间使用","
autofocus - 自动获取焦点
form - 允许表单元素定义在表单之外
表单新验证
验证属性
required属性
验证当前元素值是否为空
pattern属性
使用正则表达式验证当前元素值是否匹配
注意 - 并不能验证当前元素值是否为空
min和max属性
验证当前元素值最小值或最大值
一般适用于number、range等元素
minlength和maxlength属性
minlength - 验证当前元素值的最小长度
输入值时,允许输入小于指定值
提交表单时,验证元素值最小长度
注意
minlength并不是HTML5新属性
maxlength - 验证当前元素值的最大长度
输入值时,长度不能大于指定值
validity属性
表单验证HTML5提供一种有效状态
有效状态通过validityState对象获取到
validityState对象可通过validity属性得到
验证(有效)状态
validityState对象提供了一系列的有效状态
通过这些有效状态,进行判断
注意
所有验证状态必须配合上述的验证属性使用
作用
用来替换原本手工实现的逻辑
验证状态
valid
作用 - 判断当前元素值是否正确
注意
该状态返回true,表示验证成功
该状态返回false,表示验证失败
valueMissing
作用 - 判断当前元素值是否为空
用法 - 配合required属性使用
typeMismatch
作用 - 判断当前元素值的类型是否匹配
用法 - 配合email、number、url等
patternMismatch
作用 - 判断当前元素值是否与指定正则表达式匹配
用法 - 配合pattern属性使用
tooLong
作用 - 判断当前元素值的长度是否正确
用法 - 配合maxlength属性
注意
使用maxlength属性后,实际不可能出现长度大于maxlength的值
tooLong很难出现这种情况
rangeUnderflow
作用 - 判断当前元素值是否小于min属性值
用法 - 配合min属性
注意 - 并不能与max属性值进行比较
stepMismatch
作用 - 判断当前元素值是否与step设置相符
用法 - 配合step使用
注意 - 并不能与min或max属性值进行比较
customError
用法 - 配合setCustomValidity()方法
如果使用该方法,该状态返回true
setCustomValidity()方法
作用 - 设置自定义的错误提示内容
问题 - 使用该方法设置错误信息
当输入正确时,调用该方法将信息设置为空("")
不能使用上述有效状态的任何一种判断输入是否正确(所有状态返回false)
扩展内容
代码的编写 - 逻辑的完整性
判断value值是否为空
value==""||value==null
tooLong状态
H5小内容(一)的更多相关文章
- H5小内容(四)
SVG 基本内容 SVG并不属于HTML5专有内容 HTML5提供有关SVG原生的内容 在HTML5出现之前,就有SVG内容 SVG,简单来说就是矢量图 ...
- H5小内容(六)
Web Worker 基本内容 单线程与多线程 Worker可以模拟多线程的效果 定义 - 运行在后台的javascript 注意 - 不能使用DOM ...
- H5小内容(五)
Geolocation(地理定位) 基本内容 地理定位 - 地球的经度和纬度的相交点 实现地理定位的方式 GPS - 美国的,依靠卫星定位 北斗定位 - 纯 ...
- H5小内容(三)
Canvas(画布) 基本内容 简单来说,HTML5提供的新元素<canvas> Canvas在HTML页面提供画布的功能 在画布中绘制各种图形 C ...
- H5小内容(二)
音视频处理 视频处理 基本内容 使用Flash技术处理HTML页面中的视频内容 包含音频.动画.网页游戏等 特点 浏览器原生不支持(IE浏览器要求安装A ...
- Egret白鹭H5小游戏开发入门(一)
前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJS,玩得了Egret,又学过PIXI.js. ...
- 开发H5小游戏
Egret白鹭H5小游戏开发入门(一) 前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJ ...
- 基于uniapp自定义Navbar+Tabbar组件「兼容H5+小程序+App端Nvue」
uni-app跨端自定义navbar+tabbar组件|沉浸式导航条|仿咸鱼凸起标签栏 在跨端项目开发中,uniapp是个不错的框架.采用vue.js和小程序语法结构,使得入门开发更容易.拥有非常丰富 ...
- 从零开始开发一款H5小游戏(二) 创造游戏世界,启动发条
本系列文章对应游戏代码已开源 Sinuous game 上一节介绍了canvas的基础用法,了解了游戏开发所要用到的API.这篇文章开始,我将介绍怎么运用这些API来完成各种各样的游戏效果.这个过程更 ...
随机推荐
- 使用HttpClient进行http post/get方法的调用,以及使用dom4j解析xml
import java.io.IOException; import java.util.List; import javax.servlet.ServletInputStream; import j ...
- C++ ComboBox基础
关键点 实现过程 //添加 //添加字符串 m_cbo1.AddString("AAA"); m_cbo1.AddString("BBB"); m_cbo1.A ...
- android96 内存创建图片副本,画画板
package com.itheima.copy; import android.os.Bundle; import android.app.Activity; import android.grap ...
- 【转】Win7环境下VS2010配置Cocos2d-x-2.1.4最新版本的开发环境(亲测)
http://blog.csdn.net/ccf19881030/article/details/9204801 很久以前使用博客园博主子龙山人的一篇博文<Cocos2d-x win7+vs20 ...
- 在含有null值的复杂类的集合(Collection)中取最大值
在日常编程中,经常遇到要在一组复杂类的集合(Collection)中做比较.取最大值或最小值. 举个最简单的例子,我们要在一个如下结构的集合中选取包含最大值的元素: public class Clas ...
- Android_Intent_passObject
方法4. 把基本的数据类型封装到一个对象中,然后通过intent传递该对象需要考虑对Person对象进行序列化 MainActivity: package com.example.day06_acti ...
- mysql mac 上启动
launchctl load -w ~/Library/LaunchAgents/homebrew.mxcl.mariadb.plist 中内容: <string>/usr/local/o ...
- C# Quartz.Net 定时任务的简单使用
最近做了一个定时执行任务的软件. 执行任务时,会使用log4net记录日志,如果执行任务有异常,则发送邮件给指定的对象. 我做的是每天的9点和16点执行一次任务,以此记录: 首先,获得Quartz.N ...
- 你不知道的javascript 上卷 读书笔记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 面试相关的技术问题---java基础
最近在准备秋季校招,将一些常见的技术问题做一个总结!希望对大家有所帮助! 1.面向对象和面向过程的区别是什么? 面向对象是把构成问题的事务分解成各个对象,建立对象的目的不是为了完成一个步骤,而是为了描 ...