Vue3+ts项目中问题

原创已于 2023-11-06 15:50:40 修改 · 100 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

于 2023-10-12 00:19:17 首次发布

记录项目中问题专栏收录该内容

1 篇文章

订阅专栏

文章讲述了在Element-ui中，为了保证表单验证生效，prop属性必须与v-model绑定的属性名一致，如v-model=form.nameIn时，prop应为nameIn。并给出了相应的校验规则示例。

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'
  }]
}