The Form component provides Form validation by passing the convention’s validation rules through the Rules property and setting the form-item prop property to the name of the field to validate.

Pre-knowledge point

  • According to the documentation,modelFor the form’s data object, el-Form binds the data through model.
  • relesIs the form validation rule object, where the field names correspond to the field names in the Model
  • The el-form-item container, which binds the label by label, and the prop property is set to the name of the field to be validated
  • The form component binds the data in the Model via the V-Model

The form validates related properties

  • Hide-required-asterisk: Whether to hide the red asterisk next to the label of a required field (hide the required identifier)
  • Inline-message: Whether the validation information is displayed inline (verifies that the message is displayed on a line)

Approach 1 (No form nesting)

Take a generic form as an example:

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" 
class="demo-ruleForm">
    <el-form-item label=" Activity name"prop="name"> 
        <el-input v-model="ruleForm.name"> < /el-input> 
    </el-form-item>
<el-form>
Copy the code

This is typically written in a VUE to validate the form.

data(){
    return {
        ruleForm: { name: ' ' },
        rules: {
            name: [ 
                { required: true, message: 'Please enter an activity name', trigger: 'blur' }, 
                { min: 3, max: 5, message: 'Between 3 and 5 characters long', trigger: 'blur'}]}}},Copy the code

If you have complex validation rules, you can also use a custom validator

data() { const userValidator = (rule, value, Callback) => {if (value.length > 3) {callback()} else {callback(new Error(' username must be longer than 3'))}} return {}} rules: { user: [ { validator: userValidator, trigger: 'change' } ] }Copy the code

Approach 2 (Form nesting)

For nested forms, the general business scenario is that some form items need to be displayed or hidden according to the conditions. The model data in data may be the object within the object. The el-form also supports nested validation.

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" 
class="demo-ruleForm">
    <el-form-item label=" activity name "> <el-input v-model="ruleForm.name"> < /el-input>
        <el-form-item prop="info.name"> 
            <el-input v-model="ruleForm1.info.name"> < /el-input>

        </el-form-item>
    </el-form-item>
<el-form>

data(a){
    return {
           ruleForm: {
                info: {
                    name: ' '}},}} rules: {info: {name: [{required: true, message: 'Please select', trigger: 'change'}].}}Copy the code

Approach 3 (Dynamic form validation)

  • In addition to passing all validation rules at once on the Form component, you can also pass validation rules for properties on a single Form field.
  • This can be used when dynamically adding form-items
<el-form-item prop="email" label=" email" :rules="[{required: true, message: 'please enter email address ', trigger: 'blur'}, {type: 'email', message: 'Please enter the correct email address ', trigger: ['blur', 'change'] } ]" > <el-input v-model="dynamicValidateForm.email"></el-input> </el-form-item>Copy the code

Method 4 (Dynamically Adding Verification Rules)

  • A simple use scenario for determining whether a validation rule is required based on the condition is to display different error messages with different types.
const message =
      this.type === 'addFirst'
        ? 'Please enter a level 1 name'
        : this.type === 'addChild'
        ? 'Please enter a secondary name'
        : this.type === 'addThree' && this.editChannelItem
        ? 'Please select tertiary name'
        : 'Please enter level 3 name';
    const validatorHandle = (rule, value, callback) => {
      if (value) {
        callback();
      } else {
        callback(newError(message)); }};const newRule = [...this.formInfoRules.name, { validator: validatorHandle, trigger: 'blur' }];
    this.formInfoRules = Object.assign({}, this.formInfoRules, { name: newRule });
Copy the code

Mode 5 (Manually Control the verification status)

  • errorThe error message
  • validate-statusVerify status. Validation as SUCCESS requires, error verification fails. In Validating, “‘” is not validated

Use it like this:

<el-form-item
           
                :error="validateFormState.error"
                :validate-status="validateFormState.state"
              >
            </el-form-item>
            
  validateFormState = {
    periodSendDateError: ' ',
    periodSendDateStatus: 'success'}; Manually control the error and validate-status values when validation succeeds or fails.Copy the code