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(一)
时间: 2024-10-24 22:58:54
H5(一)的相关文章
H5版如何在微信外(非微信浏览器)进行微信支付技术方案
官方是支持在非微信内置浏览器中调起微信支付的!H5支付是基于公众号基础开发的一种非微信内浏览器支付方式(需要单独申请支付权限),可以满足在微信外的手机H5页面进行微信支付的需求.同时,由于H5链接传播十分方便.来源不易追踪,商户需要特别注意做好防钓鱼.防刷单的处理,控制风险. 流程原理 接口说明 (1)用户打开商户H5网页选购商品,生成支付订单:(2)商户调用[统一下单]接口(接口中trade_type需定义为WAP),获得预支付交易会话标识prepayid:(3)商户按照微信H5支付协议生成d
浅谈h5移动端页面的适配问题
一.前言 昨天唠叨了哈没用的,今天说点有用的把.先说一下响应式布局吧,我一直认为响应式布局的分项目,一下布局简单得项目做响应式还是可以可以得.例如博客.后台管理系统等.但是有些会认为响应式很牛逼,尤其是在不懂前端的人眼中,一味的追求响应式布局,我觉得复杂的布局项目做响应式还不如做二套样式,因为响应式的样式混在一起真的维护起来是恨费劲的.可能我说的不对,但是发表 一点点自己的看法.说道这里就想说一下移动端的布局,有很多人就是想把手机端得程序兼容ipad,我就觉得这个很不可思议为什么要这么做得,命名
微信h5支付demo微信H5支付demo非微信浏览器支付demo微信wap支付
一.首先先确定H5支付权限已经申请!(需要微信h5支付demo的可以加 851 488 243 备注:h5支付) 二.开发流程 1.用户在商户侧完成下单,使用微信支付进行支付 2.由商户后台向微信支付发起下单请求(调用统一下单接口)注:交易类型trade_type=MWEB 3.统一下单接口返回支付相关参数给商户后台,如支付跳转url(参数名"mweb_url"),商户通过mweb_url调起微信支付中间页 4.中间页进行H5权限的校验,安全性检查(此处常见错误请见下文) 5.如支付成
移动端h5实现拍照上传图片并预览
.移动端实现图片上传并预览,用到h5的input的file属性及filereader对象:经测除了android上不支持多图片上传,其他基本ok实用: 一:先说一下单张图片上传(先上代码): html结构(含多张图片容器div): 1 <div class="fileBtn"> 2 <p>点击添加图片</p> 3 <input id="fileBtn" type="file" onchange="
cocos Creator js 房卡麻将/血战/H5四川麻将源码下载搭建
房卡麻将/血战/H5四川麻将 源码 支持iOS/Android/H5 完整源码 1.基于NODEJS+MYSQL的服务器,成熟的技术方案,高效稳定,且方便Windows开发,Linux平台布署,节约服务器运转成本. 2.采用最新版本的cocos引擎,cocos creator开发,可快速的进行界面调整.且能够快速地发布iOS,Android版本. 3.如需H5版本,只需针对H5平台进行资源优化即可. 4.成熟可靠的房卡式设计,能满足大部分用户使用体验. 5.产品经过大量测试,可以运转稳定. 测试
ios嵌套H5页面,出现的小bug;
ios嵌套H5页面,点击数字时就会弹出打电话的功能:解决方法: 在head标签中添加: <meta name="format-detection" content="telephone=no"> ios嵌套H5页面,只要碰到页面,就会使input获取焦点,调取ios键盘,解决方法:在页面上添加js如下: $("body")[0].addEventListener("touchstart",function(){ d
那些H5用到的技术(1)——素材加载
编码环境前言什么时候用到素材加载?loading提示,让用户等待图片的加载音频的加载利用神器PreloadJS总结 编码环境 Sublime Text 3 插件包括: Autoprefixer 自动补全CSS ColorPicker 颜色选择器 ConvertToUTF8 转码 GBK Support 支持GBK HTML-CSS-JS Prettify 前端代码格式化 SublimeCodeIntel 最好用的自动补全 Chrome 57.0.2950.5 m 用来预览以及调试 gifcam
h5中五大存储方式
h5之前,存储主要是用cookies.cookies缺点有在请求头上带着数据,大小是4k之内.主Domain污染. 主要应用:购物车.客户登录 对于IE浏览器有UserData,大小是64k,只有IE浏览器支持. 目标 解决4k的大小问题 解决请求头常带存储信息的问题 解决关系型存储的问题 跨浏览器 1.本地存储localstorage 存储方式: 以键值对(Key-Value)的方式存储,永久存储,永不失效,除非手动删除. 大小: 每个域名5M 支持情况: 注意:IE9 localStorag
H5框架之Bootstrap(二)
H5框架之Bootstrap(二) 突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接下来我们就开始学习一下它里面的东西. 浏览器支持 旧的浏览器可能无法很好的支持 Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器 CSS源码研究 我们不是在head里面引入了下面这些文件么 <!-- 新 Bootstra
Android 原生开发、H5、React-Native使用利弊和场景技术分享
http://m.blog.csdn.net/article/details?id=51778086 发表于2016/6/28 18:52:46 1176人阅读 最近工作中接触到React-Native框架,对其进行一些技术分析,结合之前了解的H5的一部分,加上自己做了很久的原生开发(十几个android app.sdk,包括2个ios), 总结下目前了解到的这三种移动端应用开发方式的特点和试用范围,作为个人知识的记录,也作作为公司内部互相学习的分享. 一.原生开发 原生开发是系统自带的a