使用vue中的表单验证时，重新输入的value不被检验

最新推荐文章于 2024-12-10 23:37:06 发布

原创最新推荐文章于 2024-12-10 23:37:06 发布 · 436 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

2 篇文章

订阅专栏

在Vue应用中，当使用表单验证时，发现重新输入的值无法触发验证。问题在于rules对象中的属性名需与v-model绑定的字段名称一致。例如，原本的loginForm中name应改为username，pwd应改为password。修正后，表单验证功能恢复正常，确保每次输入后失去焦点都会进行数据验证。

•遇到的问题：

重新在输入框输入的数据，不能被检测。错误效果图如下：

使用的代码是：

<div class="login-form">
                <el-form ref="form" label-width="0px" :model="loginForm" :rules="loginRules">
                    <el-form-item prop="name">
                        <el-input prefix-icon="el-icon-user-solid" v-model="loginForm.username"></el-input>
                    </el-form-item>
                    <el-form-item prop="pwd">
                        <el-input prefix-icon="el-icon-unlock" v-model="loginForm.password" type="password"></el-input>
                    </el-form-item>
                    <div class="login-btn">
                        <el-button type="primary">登陆</el-button>
                        <el-button type="primary">注册</el-button>
                        
                    </div>

                </el-form>
            </div>

data(){
       return {
           loginForm:{
               username:"小白",
               password:"123",
           },
           loginRules:{
               name:[
                   {required:true,message:"请输入用户名",trigger:"blur"},
                    { min: 2, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
               ],
               pwd:[
                   {required: true, message:'请输入', trigger: 'blur'}
                ]
           }
       }
   }

预期的结果是：每次输入数据，在输入框失去焦点之后，数据就会被检测。

•问题所在：rules中的对象(本例中是loginRules)的属性名必须和数据双向绑定v-model中的命名要一致：

所以需要把loginForm中的name改成username，把pwd改成password。

以下为修改后的部分代码：

loginRules:{
               username:[
                   {required:true,message:"请输入用户名",trigger:"blur"},
                    { min: 2, max: 5, message: '长度在 3 到 5 个字符', trigger:'blur' }
               ],
               password:[
                //    {required: true, message:'请输入', trigger: 'blur'}
                   {required: true, min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger:'blur' }
                ]
           }

　　让属性的命名保持一致后，表单数据就可以成功验证啦。