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状态

时间: 2024-08-24 07:48:43

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