First introduce in the Vue file you need to use the form component
import type { FormInstance } from 'element-plus'
Take this picture to explain the attributes, the first item ref="ruleFormRef", ruleFormRef is the necessary condition for us to define and use each attribute, const ruleFormRef = ref<FormInstance>() After introducing FormInstance, that is to say, FormInstance is An interface, used to specify each attribute, the second: model="ruleForm" is the collection of validation rule objects we define, :rules="rules" is the implementation of the validation rules, including whether it is required, triggering events, Including change and blur, label-width="120px" is the width of a label, and the label under el-form will automatically inherit the width of el-form, which is equivalent to customizing a label and setting its width Set to 120px, class is our custom class name, you can customize the style, the size attribute is the size of the input box, including default large small three attributes, status-icon is to verify whether the input is correct, there will be a corresponding at the end of the input box The icon icon prompt, the default is false,
label-position The label alignment method has three attributes: left right top.
The following is the el-form-item attribute. We mentioned above that ruleForm is a collection of validation rules, so how to verify whether the user input conforms to the rules? Two attributes need to be set. The first one is to set the prop attribute on the el-form-item tag. For example, there is a name verification rule in the ruleForm object here.
The second step is to set v-model='ruleForm.name' on the el-input tag
similar to this
Now you know where the rules are used. Below is the custom rule,
The first is to define ruleForm, which is a reactive object and an object collection of all rules
The specific rules are as follows
First of all, validate is to verify the content of the entire form, followed by the implementation of specific rules, and trigger is the triggered event, which has been mentioned above.
It receives three parameters, rule is the following rule, value is the input content, callback is a callback function,
We can write our own regular expressions to validate the input.
Note: callback(), this callback parameter must be written at the end, if not written, it will always be verified, even if the content you input is in compliance with the rules.