表单验证
上节已经完成了表单的响应数据绑定等内容。现在需要对这个用户提交的绑定进行验证。
由于用户可能通过回车等操作未使用按钮进行表单提交操作，所以我们在form标签上进行事件监听。
由于表单提交后会自动刷新的特性，所以添加一句
e.preventDefault()阻止默认动作
可以看到这个对象是一个复杂对象，想要让他变成一个简单点的对象需要用到一个vue的API。
toRaw可以返回一个proxy对象的原始对象。
现在可以进行一个校验了，拿到这个formData来看这个formData是不是正确的。
进行校验
计算errors = validate(formData，rules)传一些规则 具体规则有哪些：
因为校验是由明确关系的，所以rules是一个数组。 在数组中具体描述校验的内容。 比如第一点要校验的是name，他是必须要填充的，正则表达式是1-4个任意字符 name有两个规则：首先是必须填，其次是1-4个正则 sign是必填项 错误error也是一个数组，
发现校验错误就会返回这个错误。
具体实现
单独实现一个validate函数 这个validate函数接受formData和rules两个参数。 先声明formData的类型：
key是字符串，value是字符串、数组、空、甚至它自己。
声明rule的类型
二选一的操作用&
rules是rule的数组
type Rules<T> = Rule<T>[]
通过发现formData和rules是有关联的，key必须是子集关系的，所以加一个泛型
ts的语法规定在箭头函数中只写t是不认同的，需要写成extends的形式。这里面的t就代表了FData。
vilidata函数最终会返回一个error
errors的key必须是T这个泛型中的key。
遍历rules，通过formData拿到对应value，然后分情况讨论，在required的情况下，如果value为空，在errors对应的key里面添加一个message。正则情况下，如果value存在且不能匹配规则中的正则，初始化error并添加一个message。
回到创建标签页面，想要把error的message展示出来，这里可以选择使用reactive。声明好类型，key是formData的key，value是字符串的数组
const errors = reactive<{ [k in keyof typeof formData]?: string[] }>({})
由于使用const进行声明，所以不能直接修改，但是可以通过Objeec.assign进行覆盖
Object.assign(errors,validate(formData,rules))
把得到的错误一个一个复制给errors。 每次校验前要对errors进行清空：
最后在对应的地方进行显示
标签错误：
<span>{errors['name'] ? errors['name'][0] : ' '}</span>
emoji没有选：
<span>{errors['sign'] ? errors['sign'][0] : ' '}</span>
