如何将原生JS验证表单组件xy-form改写为长尾词？

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

原生form表单 + form元素大家庭可能都用得到，除了可以提交表单外，还有一些内置的表单校验，例如require、minlength、maxlength，还有各种类型的input，比如type=email，可以校验是否是有效的邮箱。

原生form表单

form 表单元素大家可能都用到过，除了可以提交表单外，还有一些内置的表单校验，比如 require 、 minlength 、 maxlength ，还有各种类型的 input ，比如 type=email 可以校验是否是邮箱类型，如果不满足还可以使用 pattern 进行正则校验。

原生的表单验证大概如下

虽然丑陋，功能却很强大，基本可以满足一般的需求，不过ui终究过于原生，而且也不方便自定义，所以很多情况下这种默认的表单验证并不使用。

下面来看看 xy-form 下的效果

结构基本和原生类似，也不需要额外的 js 逻辑

可以说丑小鸭立马变成白天鹅了。