Element-ui custom Form validation, but no red hearts.

Basically according to the way provided in the document is not a big problem, I encountered the problem is that the custom will not show the small red Star

<el-form:model= "RuleForm2" status-icon:rules= "Rules2" ref= "RuleForm2" label-width= "100px" class= "Demo-ruleform" > <el-form-item label= "password" prop= "pass" > <el-input type= "password" v-model= "Ruleform2.pass" autocomplete= " Off ></el-input> </el-form-item> <el-form-item label= "Confirm password" prop= "Checkpass" > <el-input type = "Password" v-model= "Ruleform2.checkpass" autocomplete= "Off" ></el-input> </el-form-item> < El-form-item label= "Age" prop= "ages" > <el-input v-model.number= "ruleform2.age" ></el-input> </ el-form-item> <el-form-item> <el-button type= "PRIMARY" @click = "submitForm (' RuleForm2 ')" > Commit </ el-button> <el-button @click = "resetform (' RuleForm2 ')" > Reset </el-button> </el-form-item></ El-form><script> Export Default {data () {var checkage = (rule, value, callback) and {if (!va        Lue) {return callback (' age cannot be null ')) (new Error);       } SetTimeout (() = {if (!          Number.isinteger (value)) {callback (' Enter a numeric value ')} (new Error);            } else {if (value <) {Callback (' must be at least 18 years old ') ' (new Error);            } else {callback ();      }}}, 1000);      };        var validatepass = (rule, value, callback) = = {if (value = = =) {Callback (' Enter password ')};          } else {if (This.ruleForm2.checkPass!== ') {this. $refs. Ruleform2.validatefield (' Checkpass ');        } callback ();      }      };        var validatePass2 = (rule, value, callback) = = {if (value = = =) {Callback (' Enter password again ')};        } else if (value!== this.ruleForm2.pass) {Callback (New Error (' Two input password inconsistent! '));        } else {callback ();      }      };          return {ruleForm2: {pass: ', Checkpass: ', Age: '}, Rules2: { Pass[{validator:validatepass, Trigger: ' Blur '}], Checkpass: [{Validator:valida        TEPASS2, Trigger: ' Blur '}], age: [{validator:checkage, Trigger: ' Blur '}]    }      };            }, Methods: {SubmitForm (formName) {this. $refs [Formname].validate ((valid) + = {if (valid) {          Alert (' submit! ');            } else {Console.log (' Error submit!! ');          return false;      }        });      }, Resetform (FormName) {this. $refs [Formname].resetfields (); }}}</script>

I just changed it a bit.

Let Validatepass = (rule, value, callback) = = {      console.log (rule);      Console.log (value);      Console.log (callback);      if (!value) {        return callback (New Error ("Please fill in company name");      }      if (this.form.id) {        callback ();        return true;      }      Readscmsupplierpage ({name:this.form.name, type: ' 2 '})        . Then (res = = {          if (Res.data.length > 0) {            Callback (New Error ("duplicate name"));          } else {            callback ();          }        })        . catch (Err = {          Console.log (err);        });    };

It's basically nothing to do with customization.

Rules: {        //name: [{required:true, message: "Please enter company name", Trigger: "Blur"}],        name: [{required:true, validator:v Alidatepass, Trigger: "Blur"}],        abbreviation: [          {required:true, message: "Please enter company abbreviation", Trigger: "Blur"}        ]
   },

But I found that if I had customized it, adding required:true in this place would not work, it would have to be added on the form form.

<el-form-item label= "Company name": Label-width= "Formlabelwidth" prop= "name" required>          <el-input v-model= " Form.name "></el-input>        </el-form-item>

Just like this, a Little Red star will appear.

Element-ui custom Form validation, but no red hearts.