Vue3+ts项目中问题

Element-ui中表单验证的prop必须和v-model保持命名一致，验证才生效

  <el-form :model="form" :rules="accountRules" ref="loginForm">
    <el-form-item prop="nameIn">
      <el-input v-model="form.nameIn" prefix-icon="user" />
    </el-form-item>
    <el-form-item prop="passwordIn">
      <el-input v-model="form.passwordIn" prefix-icon="lock" clearable show-password />
    </el-form-item>
  </el-form>


// 定义校验规则
const accountRules: FormRules = {
  nameIn: [{
    required: true,
    message: '必须输入帐号信息~',
    trigger: 'blur'
  }, {
    pattern: /^[a-z0-9]{6,20}$/,
    message: '必须是6~20数字或字母组成~',
    trigger: 'blur'
  }],
  passwordIn: [{
    required: true,
    message: '必须输入密码信息~',
    trigger: 'blur'
  }, {
    pattern: /^[a-z0-9]{3,}$/,
    message: '必须是3位以上数字或字母组成',
    trigger: 'blur'
  }]
}

上面代码中，v-model="form.nameIn"，所以prop必须要为 nameIn