<>Vue Element-ui Form Form usage

In the face of the project, a large number of form submission and rule validation ,Element-ui Form Form is our best helper , Here is an introduction form The usage of form and the encapsulation of rule checking .


In order to encapsulate the rule validation of all forms We need to be here el-form plus rules attribute ,rules Can be in data It defines a global variable .
model On applyForm It's a data Variables defined in , It should be noted that when doing rule validation applyForm,rules
The variable name in the . Below is the defined code .

The above code will write the validation rules of all forms together , have validator Custom attribute validation , I did a series of things , For example, some mobile phone number verification , ID verification and so on

<> Verification of ID card

<> cell-phone number , Verification of graphic code

All of the above will be el-form Encapsulate the built-in rule validation , Next up el-form-item How to write each form

Form writing method of province and city , stay el-form-item There is one prop attribute , Its function is to verify the verification rules of the current module .

v-model It's our common two-way binding .
When we click on the form submit, there will be a validate Method is used for global verification .

When validate by true The verification is passed Otherwise we can take it return.