在进行vue3实战项目学习的时候遇到了element-plus的自定义表单验证

最开始的时候跟着视频在敲代码，视频中提到自定义时需要用到validator属性进行自定义验证函数的书写，其中参数有 rule、value、callback三个其作用分别是： rule 为校验规则对象，value为输入框的值，callback为校验成功或者失败的回调函数突发奇想把几个参数都输出看看长什么样子，结果在进行value值输出的时候发现不管怎么输出都是undefined，这个时候我的代码是这样子的

typescript 复制代码

<el-form @submit="" @reset="" class="login_form"  :rules="rule" >
         <h1>Hello</h1>
          <h2>欢迎来到硅谷甄选</h2>
          <el-form-item label="" prop="username">
            <el-input
              placeholder="请输入用户名"
              :prefix-icon="User"
              v-model="loginForm.username"
            ></el-input>
          </el-form-item>
          <el-form-item label="" prop="password">
            <!-- 组件应该写动态的，应该是底层实现的时候写的图标的具体名字给空出来了 -->
            <!-- show-password 可以更改密码的形式 文本或者是密码 -->
            <!-- prop="password" 根据prop属性来判断需要校验的规则是哪条
            show-password 是输入密码 后边的小眼睛，组件自带的
            -->
            <el-input
              type="password"
              placeholder="请输入密码"
              :prefix-icon="Lock"
              v-model="loginForm.password"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button :loading="ifLoading" class="login_btn" type="primary" size="default" @click="travelToHome">
              登录
            </el-button>
          </el-form-item>
        </el-form>
const loginForm = reactive({
  username: 'admin',
  password: '111111',
})
  const rule={
  username:[
    // trigger:'change' 表示在输入框内容改变时进行校验 一共有两个属性值 blur和change
    {trigger:'change',validator:UserNameV},
  <!-- 这里以password的验证函数为例 -->
  ],
  password:[
  {trigger:'change',validator:async (rule:any,value:any,callback:any)=>{
    console.log(loginForm.password,'-----------------------');
    console.log(value);
    console.log(value.length);
    
    
    if(value===''){
        callback(new Error('密码不能为空'))
      }else{
        if(/^\d[5,10]$/.test(value)){
          
          callback()
        }else{
          callback(new Error('密码长度需要在6-10个字符之间'))

        }
      }
    }},
]
}
复制代码

这谁受得了啊，然后我就开始反复的看视频，看看是不是漏了什么东西，结果到最后什么都没看出来，没办法，只能去看看官方文档怎么写的此处跳转 ->element-plus.org/zh-CN/compo... 就看到了这样一个东西

？我的代码里好像没有这个东西？这是什么意思

好的，是表单中所用的数据对象，而且在查资料之后发现

el-form 的 model 属性是用来指定表单使用的数据的，虽然 el-form 指定了 model 对象，但是，理论上，vue 并没有限制 el-input 绑定的数据，el-form 内部的 el-input 组件依然可以绑定其他数据。需要注意的是，如果要用 rules 进行表单校验，那么 el-input 绑定的元素必须是 el-form 的 model 的直接属性，否则会导致校验失败

把这句代码写进我的代码里面之后

typescript 复制代码

<el-form @submit="" @reset="" class="login_form"  :rules="rule" :model="loginForm">
          <h1>Hello</h1>
          <h2>欢迎来到硅谷甄选</h2>
          <el-form-item label="" prop="username">
            <el-input
              placeholder="请输入用户名"
              :prefix-icon="User"
              v-model="loginForm.username"
              
            ></el-input>
          </el-form-item>
          <el-form-item label="" prop="password">
            <!-- 组件应该写动态的，应该是底层实现的时候写的图标的具体名字给空出来了 -->
            <!-- show-password 可以更改密码的形式 文本或者是密码 -->
            <!-- prop="password" 根据prop属性来判断需要校验的规则是哪条
            show-password 是输入密码 后边的小眼睛，组件自带的
            -->
            <el-input
              type="password"
              placeholder="请输入密码"
              :prefix-icon="Lock"
              v-model="loginForm.password"
              show-password
              
            ></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button :loading="ifLoading" class="login_btn" type="primary" size="default" @click="travelToHome">
              登录
            </el-button>
          </el-form-item>
        </el-form>
复制代码

再次进行value的输出，果然，就是这里的问题！经验总结：官方文档还是要看的视频还是要一点一点仔仔细细的跟着敲的，不然谁知道会漏掉什么东西

vue3实战项目学习/element-plus的自定义表单验证/value值

在进行vue3实战项目学习的时候遇到了element-plus的自定义表单验证