• HTML5-关于表单


     * 基本内容

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

       *

  • 相关阅读:
    easyui datagrid 编辑器绑定事件
    Java初学(八)
    Java初学(七)
    Java初学(六)
    Java初学(五)
    Java初学(四)
    GCC基本知识
    OpenCL memory object 之 Global memory (2)
    OpenCL memory object 之 Global memory (1)
    OpenCL memory object 之 传输优化
  • 原文地址:https://www.cnblogs.com/baiyanfeng/p/5042884.html
Copyright © 2020-2023  润新知