I believe many of you who are using the Element-UI component have used the el-Form component, which helps us complete the form verification and form submission functions. However, when we use it, we may find some disadvantages, such as the inability to reuse the verification rules.

About not being able to reuse

Such as the form I need a phone number format validation rules, and if I use in a page, I will copy this rule again in this page, this is good, but if I am in the project to another page, will use this rule, but also copied it again, this makes some people unhappy. And this new package, which I will talk about next, has a lot of common components built in, so it is very easy to use directly

When we use a rule, we need to set the attributes of rules, Model and ref on the EL-Form component, as well as prop on the El-Form-Item component. Moreover, some of these variables are repeatedly defined, so there is room for optimization. And there are too few built-in validation rules.

New options

Recently, I found such a form verification component on Google. I tried it out and found it very powerful and convenient. As we all know, form verification function forms and form fields are closely related, so two-way data communication and error data display need to be considered. VueFormulate supports plug-in extensions. First of all, VueFormulate has built-in some beautiful form fields, which can be directly put into the project. In addition, it can also be extended to use other form fields. Examples include text input boxes, number input boxes, cascade selectors, etc., in Element-UI.

For more information, check out VueFormulate’s Chinese document, which was recently translated.

Combine Element-UI and VueFormulate

Because our project is developed with Element-UI, in order to keep the style uniform, VueFormulate needs such a plug-in, so I open source formulat-el-UI plug-in, in order to reduce the use of difficulties, This plug-in follows the semantic version 2.0 specification. Github address of the project, if not accessible, you can view Gitee

Trust me, it will improve your form development efficiency.