Skip to content

第 105 期(W3C标准-HTML):表单验证 #108

@wingmeng

Description

@wingmeng

HTML5 为表单验证提供了极大的方便,在验证表单方式上非常灵活,提供了专门用于表单验证的属性、方法和事件。

  • required:用以设置必填项

    <!-- 此时当文本框为空时,其所在表单无法提交 -->
    <input name="name" type="text" required>
  • minmaxstep:用于为包含数字或日期的 input 类型规定限定(约束),其中:

    • max 属性规定输入域所允许的最大值
    • min 属性规定输入域所允许的最小值
    • step 属性为输入域规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)
    <input name="volume" type="range" min="0" max="100" step="2">
  • pattern:用于为 input 元素定义一个验证模式,其值是正则表达式,这是一个非常灵活的验证特性

    <!-- 如输入内容不符合 pattern 给定的格式,则不能提交 -->
    <input name="code" type="text" pattern="[0-9]{6}" placeholder="6位邮政编码">
  • novalidate:用于指定表单或表单内的元素在提交时不验证。

    <!-- 此时表单中所有元素在提交时都不再验证 -->
    <form novalidate>
      <!-- 表单元素... -->
    </form>  

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions