Element UI 中表单元素的验证机制

前言

Element UI 框架中的表单验证使用 async-validator（异步校验）第三方库实现，该库在 GitHub
的地址是 https://github.com/yiminghe/async-validator，至今在 GitHub 上已经有了 5.1+的 star，是
多 款 前 端 框 架 使 用 的 表 单 验 证 机 制 。 该 库 在 npm 中 的 API 文 档 地 址 为 ：
http://npm.taobao.org/package/async-validator。

---

一、Element UI中表单元素的验证规则

在 Element UI 框架中，表单是使用el-form标记对和el-form-item标记对实现的。其中
表单的验证使用el-form标记对的 rules 属性来进行设置。

在 Element UI 框架中， 对表单数据进行验证需要对el-form标记对和el-form-item标记
对进行设置，设置规则如下所示。

• el-form标记对的 rules 属性在数据区绑定为一个对象型数据。
• rules 对象的键名必须与表单元素利用 v-model绑定的变量名一致。
• rules 对象的键名取值为一个数组，数组元素是表单元素的多个验证规则。
• el-form-item标记对使用 prop 属性来为表单元素设置需要满足的验证规则。

示例代码如下所示：

<el-form :model="formData" :rules="rules">
  <el-form-item prop="userNick">
    <el-input v-model="formData.userNick"> </el-input>
  </el-form-item>
</el-form>

data:function(