vue表單v-validate再次輸入密碼confirmed校驗不通過問題
阿新 • • 發佈:2019-02-05
按官方文件,只要寫成:
<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屬性在目前版本已不再生效。