11x1 精读Vue官方文档 - CookBook - 表单校验 & 创建一个CMS 博客。

精读 Vue 官方文档系列 ?

表单校验

提供一份简单的手动表单校验思路：

• v-model 结合响应式数据，最终对这个响应式变量进行校验判断。
• v-model 结合一个带有 setter/getter 的计算属性，在计算属性中直接判断。
• 如果存在多个控件的值相互存在联系，则将它们定义到一个新的计算属性中。

最后得出的一个比较信服的结论、如果可以，请将 type="emial" 交由浏览器进行校验。同时下面是基于它实现的正则表达式（仅限于 JavaScript 与 Perl）

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

当然，除了在简单场景下进行手工简单的表单校验，你还可以使用一些基于 Vue 的表单校验库：

• vuelidate
• VeeValidate

创建一个 CMS 的博客。

本篇主要提供了一个解决方案，既通过 ButterCMS 一个 API 优先的 CMS（Headless CMS），其提供了一个可视化的 UI 界面来管理内容，然后通过 API 接口请求来消费这些内容，此时，你就可以将你的 Vue 应用作为完整 CMS 中的一个渲染环节。

ButterCMS