vue表单v-validate再次输入密码confirmed校验不通过问题

按官方文档,只要写成:

<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属性在目前版本已不再生效。

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值