Question

passwordFieldType: "password",
passwordFieldTypetwo: "password",
maxpassword: 20,
maxconfirmpassword: 20,
user: {
        password: "",
        confirmPassword: "",
      
      },
      
 user: {
      password: { required, minLength: minLength(8), maxLength: maxLength(20) },
      confirmPassword: { required, sameAsPassword: sameAs("password") },
      
       },

<input :type="passwordFieldType" v-model="user.password"
 v-model.trim="$v.user.password.$model"
id="password" name="password"
class="input-section-thr"
:class="{'is-invalid': validationStatus($v.user.password) }"                  
placeholder="Enter new password"
:maxlength="maxpassword"
v-on:keypress="isPassword($event)"/>
                
 <div v-if="!$v.user.password.minLength" class="invalid-feedback-register">first validation {{ $v.user.password.$params.minLength.min }} </div>
 
<div v-else-if="$v.user.password.maxLength" class="invalid-feedback-register">
 maximum 20 characters {{ $v.user.password.$params.maxLength.min }} </div>

在密码字段中，如果我输入 8 个字符的错误建议显示，

但问题是在密码字段中，如果我输入 20 个字符，则密码字段不会显示错误消息。

Answer 1

验证失败（字符长度超过指定限制）时，$v.user.password.maxLength 值为 false，但您的 <div> 仅在验证通过时显示。解决方法是反转 v-else-if 中的条件：

<div v-else-if="$v.user.password.maxLength"> ❌
                ^

<div v-else-if="!$v.user.password.maxLength"> ✅

此外，您的 <input>.maxlength 设置为最大字符长度，这不仅可以防止用户超过字符限制，还可以防止验证失败，因此您永远不会看到错误消息。修复方法是删除 maxlength 绑定：

<input :maxlength="maxpassword"> ❌
       ^^^^^^^^^^^^^^^^^^^^^^^^

<input> ✅

demo

Vuejs 中未显示密码字段的验证错误消息？

1 个答案: