vue表单v-validate再次输入密码confirmed校验不通过问题
按官方文档,只要写成:<div><mt-field label="密码" placeholder="请输入密码" v-validate="'required'" data-vv-name="password":class="{'is-danger': errors.h
·
按官方文档,只要写成:
<div>
<mt-field label="密码" placeholder="请输入密码" v-validate="'required'" data-vv-name="password"
:class="{'is-danger': errors.has('password') }" :type="passwordType" :attr="{maxlength:20}"
v-model="user.password">
</mt-field>
<div v-show="errors.has('password')">
<p>{{ errors.first('password') }}</p>
</div>
</div>
<div>
<mt-field label="确认密码" placeholder="请再次输入密码" v-validate="'required|confirmed:password'" data-vv-name="repassword"
:class="{'is-danger' :errors.has('repassword') }" :type="passwordType" :attr="{maxlength:20}"
v-model="user.repassword">
</mt-field>
<div v-show="errors.has('repassword')">
<p>{{ errors.first('repassword') }}</p>
</div>
</div>
但在实际应用时,即使输入密码一样还是会提示错误,如下图:
为什么会这样??
因为v-validate的版本发生了变化,但是官方文档没有及时更新。正确写法如下:
<div>
<mt-field label="密码" placeholder="请输入密码" v-validate="'required'" data-vv-name="password"
:class="{'is-danger': errors.has('password') }" :type="passwordType" :attr="{maxlength:20}"
v-model="user.password">
</mt-field>
<div v-show="errors.has('password')">
<p>{{ errors.first('password') }}</p>
</div>
</div>
<div>
<mt-field label="确认密码" placeholder="请再次输入密码" v-validate="{'required': 'true', 'is': user.password}" data-vv-name="repassword"
:class="{'is-danger' :errors.has('repassword') }" :type="passwordType" :attr="{maxlength:20}"
v-model="user.repassword">
</mt-field>
<div v-show="errors.has('repassword')">
<p>{{ errors.first('repassword') }}</p>
</div>
</div>
这样就成功了,如图:
注:is属性可以对<input>标签中v-model内容进行匹配。confirmed属性在目前版本已不再生效。
更多推荐
已为社区贡献11条内容
所有评论(0)