HTML5中新表单元素及表单验证

HTML5新表单

  1、input新类型

      ①email类型 

 语法：<input type=”email” />

 作用 - 验证是否包含"@"

 问题 - 验证逻辑并不完整

     ②url类型 

语法：<input type=”url” />

     作用 - 提交表单时,验证是否包含"http://"

问题 - 验证逻辑并不完整

     ③tel类型 - 只在移动端显示

     ④number类型

语法：<input type=”number” min=" " max=" " step=" " />

min - 最小值

max - 最大值

step - 步长,默认值为1

      ⑤range类型 

 语法：<input type=”range” min=”1” max=”100” value”50”/>

min - 最小值

max - 最大值

step - 步长

value - 当前值

     ⑥date类型

 语法：<input type=”date” />

     ⑦week类型

 语法：<input type=”week” />

    ⑧month类型

 语法：<input type=”month” />

     ⑨color类型

语法：<input type=”color” />

    (10)search类型--输入搜索关键字操作的文本框

语法：<input type=”search” />

 

  2、表单新元素

  ①datalist元素--定义备选项(并不显示)

     配合<input>元素使用

定义list属性 - 属性值等于<datalist>元素的id属性值

     效果和<select>下拉列表类似

特点 - 数据与结构的分离

数据 - 预定义数据内容<datalist>

结构 - 显示在HTML页面中的元素<input>

优点 - 使用<datalist>元素定义的数据,可以重复使用

  ②progress元素---进度条

max - 设置进度条的最大值

没有min属性 - 最小值为0

value - 表示当前的进度值

 ③meter元素--刻度

min - 最小值

max - 最大值

value - 当前值

low - 低预警值

high - 高预警值

 ④output元素--输出

 3、表单新属性

      ①placeholder属性 - 提供默认提示内容

  语法：<input type=”text” placeholder=”提示文本  ” />

  作用 - 类似于value属性

  区别-

value属性值：显示为黑色，确实存在文本框中

placeholder属性值：显示为灰色，类似于背景存在

 

    ②multiple属性 - 允许输入多个值

  语法：<input type=”text” multple/>

          作用 - 允许输入多个值

      注意 - 多个值之间使用","

     用法 - 只定义属性名,没有属性值

 

   ③autofocus属性 - 自动获取焦点

语法：<input type=”text” autofocus />

  作用 - 自动获取焦点

用法 - 只定义属性名,没有属性值

 

  ④form 属性- 允许表单元素定义在表单之外

语法：<form id=”myform”></form>

<input type=”text” form=”myform” name=”uname”>

原本的HTML页面中定义表单元素

所有的表单元素,必须定义在<form>元素中

作用 - 允许将表单元素定义在<form>元素外

<form>元素外的表单元素,使用该属性

form属性值等于<form>元素的id属性值

    4、表单新验证

  (1)验证属性

  ①required属性：验证当前元素值是否为空

语法：<input type=”text” required />

  ②pattern属性:使用正则表达式验证当前元素值是否匹配

语法：<input type=”text” pattern=”[0-9a-zA-Z]{6,16}” />

   注意 - 并不能验证当前元素值是否为空

  ③min和max属性：验证当前元素值最小值或最大值

   一般适用于number、range等元素

语法：<input type=”number” min=”1” max=”50” />

  ④minlength和maxlength属性

语法：<input type=”text” maxlength=”10” minlength=”1” />

         minlength - 验证当前元素值的最小长度

     输入值时,不允许输入小于指定值

     提交表单时,验证元素值最小长度

     注意：minlength并不是HTML5新属性

        maxlength - 验证当前元素值的最大长度

     输入值时,长度不能大于指定值

 ⑤validity属性

语法：指定元素.validity.validityState

如：Elem.validity.valid

          表单验证HTML5提供一种有效状态

   有效状态通过validityState对象获取到

   validityState对象可通过validity属性得到

       验证(有效)状态

         validityState对象提供了一系列的有效状态

         通过这些有效状态,进行判断

        注意：所有验证状态必须配合上述的验证属性使用

        作用：用来替换原本手工实现的逻辑

    

(2)验证状态

     ①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)