如何快速掌握Vue表单的创建与使用技巧？

本文共计2851个文字，预计阅读时间需要12分钟。

目录+普通表单+初始数据与自动校验与动态赋值+发布表单+普通表单+我们首先可以创建一个普通的表单，我们知道表单相对比较复杂，antv被我们视为一个表单，这个设计出来...

目录

• 普通表单
• 初始数据与自动校验与动态赋值
• 发布表单

普通表单

我们先可以创建一个普通的表单，我们知道的是表单是相对比较复杂的，antv被我们诟病为就是其表单，这个设计出来的理念就是和别的组件库不一样，我们就在这篇文章分成四个部分来讲述，现在我们的第一个部分，就是我们的普通的表单。

操作的步骤：先再main.js引入注册Form和Input，在BasicForm拷贝刚才的表单布局，这个就是最基础的表单。接下来就是需要添加一个错误校验，有对应的属性传递对应的状态等。拷贝validateStatus到item中加上对应的help文本，如果想要动态输入的话也可以，给input双向绑定fieldA和fieldB，在data里面注册这两个值，同时validateStatus也变成动态的指向fieldAStatus，文本也是动态指向fieldAHelp。通过监听fieldA的长度，如果小于5改变状态和文本，否则就都置为空就行了。同样的，给按钮也绑定一个事件handleSubmit，拷贝刚才的监听逻辑，如果通过就console.log输出一下。

如此就完成了一个最简单的表单校验，像这种手动添加错误校验信息是最灵活简单但是不够渐变，最好是组件内部自动校验。