Markup-based vs. Model-based

[00:00:00]
>> Evan You: The next topic is Form Validation. So, before we go into the actual code, I want to talk about that. Form Validation, in terms of components, there are two schools of thought, different styles, I would say. So one of them is markup-based and the other is model-based. So vee-validate and vuelidate are two of the probably most popular form of validation plugins in the vue ecosystem, and they take two different approaches.

[00:00:34]
Markup-based means the rules for validating a form field is directly declared in the template along with the element Itself. Similar to how html form elements allows you to do things like inputs. Main length equals 5 or max length equals 20. Everything is sort of on the component directly there.

[00:00:56]
You're essentially declaring your rules right in your template. So that's one way to go about it. And the other way to go about it is model-based. Essentially you declare your validation rules inside the JavaScript. The good thing about the model-based validation rule is that your templates will look cleaner.

[00:01:15]
And the other thing is because you're using JavaScript declared rules, it's easier to implement custom validation rules. If you go the market-based route, you're essentially relying on the library, or the plugin to pre-implement all the validation rules for you. So that you can directly reference them in your template using attributes or directives.

[00:01:38]
But using a JavaScript-based validation rule in addition to these built-in rules that the library provide, you can implement your own. You can mix and match using existing validation libraries, pure JavaScript validation libraries, to combine it with your validation plugin to do things. So in the next example, I'm going to walk through how to build a very simple version of a validation library that's very similar to how vuelidate works in practice