如何在输入框下加入条件不符的报错（vue和element）

做一个如图的功能

 html代码如下：

<template>
<div>
<el-row>
        <el-col :span="12">
          <el-form-item label="用户姓名" label-width="120px" prop="username">
            <el-input
              v-model.trim="form.username"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户密码" label-width="120px" prop="password">
            <el-input
              v-model.trim="form.password"
              type="password"
              autocomplete="new-password"
            ></el-input>
          </el-form-item>
        </el-col> </el-row>
</div>
</template>

js部分：

<script>
export default {
  name: 'userManagerEdit',
  data() {
    const validateusername = (rule, value, callback) => {
      if (this.title == '添加') {
        if ('' == value) {
          callback(new Error('用户名为英文或数字组成'))
        } else {
          var r = /^[a-zA-Z0-9]+$/ 
          if (!r.test(value)) {
            callback(new Error('用户名格式错误'))
          } else {
            this.getUserName(value, callback)
          }
        }
      } else {
        if ('' == value) {
          callback(new Error('用户名为英文或数字组成'))
        } else {
          if (value == this.name) {
            callback()
          } else {
            var r = /^[a-zA-Z0-9]+$/
            if (!r.test(value)) {
              callback(new Error('用户名格式错误'))
            } else {
              this.getUserName(value, callback) //这个是一个接口函数，判断是否重名的
            }
          }
          // var r = /^[a-zA-Z0-9]+$/
          // if (!r.test(value)) {
          //   callback(new Error('用户名格式错误'))
          // } else {
          //   this.getUserName(value, callback)
          // }
        }
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (!isPassword(value)) { //写的一个js，从外面引入的，也就是判断value的长度是在6-10中间，可以用上面那种表达方式来判断
        callback(new Error('密码在6-10位之间'))
      } else {
        callback()
      }
    }
return {
      form: {
        username: '',
        password: '',
      },
      rules: {
        username: [
          {
            required: true,
            trigger: 'blur',
            validator: validateusername,
          },
        ],
        password: [
          {
            required: true,
            trigger: 'blur',
            validator: validatePassword,
          },
        ],
      },
</script>

整个思路就是通过表单提交来写