在进行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的输出，果然，就是这里的问题！ 经验总结： 官方文档还是要看的 视频还是要一点一点仔仔细细的跟着敲的，不然谁知道会漏掉什么东西