Element UI 框架中表单数据的验证方式

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

2、 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 框架中，对表单数据进行验证需要对标记对和标记 对进行设置，设置规则如下所示。

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

实例代码如下所示：

<template>
	<el-form :rules="ruels" :model="clientInsertData">
	     <el-form-item prop="name">
	         <el-input v-model="clientInsertData.name"></el-input>
	     </el-form-item>          
    </el-form>
</template>

<script>
	data(){
   
		return {
   
			clientInsertData:{
   
				name:''
			},
			rules:{
   
	            name:[
	              {
   required:true,message:'客户姓名不得为空',trigger:'blur'}
	            ]          
			}
		}
	}
</script>

1、required：

功能：验证表单元素是否为必填项，取值为逻辑值。

2、type：

功能：验证表单元素输入的数据必须遵循的数据类型。
取值：
string - 默认值，设置必须是字符型。
number - 设置必须是数值型。
boolean - 设置必须是逻辑型。
integer - 设置必须是整形数值。
float - 设置必须是实型数值。
array - 设置必须是数组数据。
object - 设置必须是对象数据而并非数组。
method - 设置必须是 function 函数。
date - 设置必须满足日期格式。
url - 设置必须满足域名格式。
email - 设置必须满足电子邮箱地址格式。
hex - 设置必须是十六进制数据格式。
enum - 设置必须为可枚举值，需要结合 enum 键共同使用。
any - 设置可以为任意类型的数据。

3、enum：

功能：指定枚举校验的可枚举值。
例如：规定 sex 表单元素只能取“男”或“女”两个字中的一个。

rules:{