表单验证 [原生]

应用HMTL5原生的表单及输入框属性，验证表单内容：

类型属性

除了常用的text、password等外，在上一章中，我们还介绍了HTML5新增的输入类型，分别有：

类型	说明
email	电子邮件地址输入框
url	网址输入框
number	数值的输入框；可设置min、max、step属性
range	特定值的范围的数值，以滑动条显示；可设置min、max、step属性
search	用于搜索引擎，比如在站点顶部显示的搜索框
color	颜色选择器
date	日期选择器，同时包含month、week、time、datetime、datetime-local等类型

在原生的HTML5中，常用的表单及输入框验证属性有：

属性名	说明
placeholder	在输入框无内容时显示灰色提示
autofocus	让input自动获取焦点
required	设置表单元素为必填
pattern	表单验证使用正则
novalidate	该属性使用在form标签上，让设置了验证的表单可以直接提交 <form novalidate>…</form>
formnovalidate	该属性使用在提交按钮上，让设置了验证的表单可以直接提交 <input type=”submit” formnonvalidate />
multiple	多个值，以逗号分隔。
autocomplete	部分输入框和form都可以设置自动提示 off关闭，on开启（默认是on）
maxlength	最大字符长度
list	数据列表，与`datalist`配合使用
min	最小值
max	最大值
step	数字间隔

验证方法

根据上表的输入框类型和相关属性结合，验证输入内容。

必填

给输入框添加required属性，则此输入框为必填项。

    <form class="form">
      <div class="input-group">
        <label>必填</label>
        <div class="input-block">
          <input class="input" placeholder="必填输入框" type="text" required />
        </div>
      </div>
      <div class="form-button">
        <button type="submit" class="button">提交</button>
      </div>
    </form>

指定类型

指定输入框type的类型值，如email、number等：

    <form class="form">
      <div class="input-group">
        <label>邮箱</label>
        <div class="input-block">
          <input class="input" placeholder="输入框邮箱" type="email" />
        </div>
      </div>
      <div class="input-group">
        <label>网址</label>
        <div class="input-block">
          <input class="input" placeholder="输入框网址" type="url" required />
        </div>
      </div>
      <div class="form-button">
        <button type="submit" class="button">提交</button>
      </div>
    </form>

正则验证

在类型不满足的条件的情况下，可使用pattern属性，验证输入内容，pattern的值为正则验证。

    <form class="form">
      <div class="input-group">
        <label>必填</label>
        <div class="input-block">
          <input class="input" placeholder="5-7位大小写英文字母" type="text" required pattern="^[a-zA-Z]\w{5,7}$" />
        </div>
      </div>
      <div class="form-button">
        <button type="submit" class="button">提交</button>
      </div>
    </form>

取消验证

取消验证有2种方法，一是在form元素上添加novalidate属性值，二是在提交按钮上添加formnovalidate属性。

表单取消验证

    <form class="form" novalidate>
      <div class="input-group">
        <label>必填</label>
        <div class="input-block">
          <input class="input" placeholder="必填输入框" type="text" required />
        </div>
      </div>
      <div class="form-button">
        <button type="submit" class="button">提交</button>
      </div>
    </form>

按钮取消验证

    <form class="form">
      <div class="input-group">
        <label>必填</label>
        <div class="input-block">
          <input class="input" placeholder="必填输入框" type="text" required />
        </div>
      </div>
      <div class="form-button">
        <input type="submit" class="button" formnovalidate value="取消验证提交" />
        <input type="submit" class="button" value="验证提交" />
      </div>
    </form>

常用正则

我们整理了常用的正则表达式，供pattern使用：

用途	正则
中文字符	^[\u0391-\uFFE5]+$
英文字符	^[A-Za-z]+$
整数	^[-\+]?\d+$
正整数	^[+]?\d+$
用户名	^[a-z]\w{3,}$
手机	^1(3\|4\|5\|6\|7\|8\|9)\d{9}$
电话	^(($\d{2,3}$)\|(\d{3}\-))?($0\d{2,3}$\|0\d{2,3}-)?[1-9]\d{4,7}(\-\d{1,4})?$
IP	^[\d\.]{7,15}$
QQ	^[1-9]\d{4,10}$
邮编	^[1-9]\d{5}$
身份证	^\d{6}(18\|19\|20)?\d{2}(0[1-9]\|1[0-2])(0[1-9]\|[012]\d\|3[0-3])\d{3}(\d\|X)$

在普通的表单中，原生的验证满足大部份的需求，在一些比较复杂的表单验证，可使用下一章的JS验证方式。