1. Define authentication rules

Such as:

Where, the validator is defined in data as a self-defined verification rule function.

Data (){// Custom validateName rule const validateName = (rule, value, callback) => {} return{rules:{name: [{required: True, message: 'Department name cannot be empty ', trigger: 'blur'}, {min: 1, Max: 50, message:' Department name requires 1-50 characters ', trigger: 'blur' }, { validator: validateName, trigger: 'blur' }], } } }Copy the code

Rule: indicates the adopted rule

Value: indicates the verified value

Callback is a callback function

If it passes the rule test, it’sDirect callcallback()

If the rule fails, the callback is called (error object, in which the reason is stated)

Success or failure callbackYou have to call

2. Configure the template and apply the rules

Pass the validation rules to the rules property of the form

Set the model attribute to the form and pass in the form data

<el-form ref="deptForm" :model="form" :rules="rules" label-width="120px">
    ...
</el-form>
Copy the code

Sets the prop property for the form-item element, whose value is set to the name of the field to validate

<el-form-item label=" introduce" prop="introduce">... </el-form-item>Copy the code

3. Manual pocket verification

The confirm button binding is submitted in the item item of the form element

<el-form-item> <el-button type="primary" size="small" @click="hSubmit"> </el-button> </el-form-item>Copy the code
$refs.form.validate(valid => {if (valid) {do something... }})}Copy the code