1. 程式人生 > >vue表單v-validate再次輸入密碼confirmed校驗不通過問題

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