您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“Vue兩個(gè)字段聯(lián)合校驗(yàn)修改密碼功能的實(shí)現(xiàn)”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“Vue兩個(gè)字段聯(lián)合校驗(yàn)修改密碼功能的實(shí)現(xiàn)”吧!
1、前言
2、方案實(shí)現(xiàn)
2.1、實(shí)現(xiàn)代碼
2.2、代碼說(shuō)明
2.3、校驗(yàn)效果
??本文是前文《Vue Element-ui表單校驗(yàn)規(guī)則,你掌握了哪些?》針對(duì)多字段聯(lián)合校驗(yàn)的典型應(yīng)用。
??在修改密碼時(shí),一般需要確認(rèn)兩次密碼一致,涉及2個(gè)屬性字段。類似的涉及2個(gè)屬性字段的情況有:
日期時(shí)間范圍,如果兩者都有值,則要求:結(jié)束時(shí)間>=開(kāi)始時(shí)間。
數(shù)量關(guān)系:數(shù)量下限<=數(shù)量上限。
??特點(diǎn)是兩個(gè)屬性值都是可變的。本文以校驗(yàn)兩次密碼的一致性應(yīng)用,給出兩個(gè)可變屬性值的字段之間的聯(lián)合校驗(yàn)的典型解決方案。
??先給出表單的代碼:
<template> <div id="contentwrapper"> <h6 class="heading" align=left>用戶管理 / 修改密碼</h6> <!-- 分隔線 --> <el-divider></el-divider> <el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form-item label="原 密 碼:" prop="oldPasswd"> <el-input v-model="form.oldPasswd" :type="password"> <!-- input中加圖標(biāo)必須要有slot="suffix"屬性,不然無(wú)法顯示圖標(biāo) --> <i slot="suffix" :class="icon" @click="showPassword"></i> </el-input> </el-form-item> <el-form-item label="新 密 碼:" prop="newPasswd"> <el-input v-model="form.newPasswd" :type="password"> <i slot="suffix" :class="icon" @click="showPassword"></i> </el-input> </el-form-item> <el-form-item label="確認(rèn)密碼:" prop="confirmPasswd"> <el-input v-model="form.confirmPasswd" :type="password"> <i slot="suffix" :class="icon" @click="showPassword"></i> </el-input> </el-form-item> <el-form-item> <el-button type="primary" size="small" @click="submit()">確定</el-button> <el-button type="primary" size="small" @click="cancel()">取消</el-button> </el-form-item> </el-form> </div> </template> <script> import {passwordValidator} from '@/common/validator.js' export default { data() { // 比較兩次密碼是否相同 const comparePasswdValidator = (rule, value, callback) =>{ // 獲取獲取值的方法 var getvaluesMethod = rule.getValuesMethod; // 調(diào)用getvaluesMethod方法,獲取對(duì)象值 var formData = getvaluesMethod(); // 有一個(gè)為空,可能還沒(méi)有輸入值,此時(shí)不比較 if (formData.newPasswd == '' || formData.confirmPasswd == ''){ return callback(); } // =========================================================== // 比較兩次密碼 // 兩個(gè)都有值,比較 if (formData.newPasswd == formData.confirmPasswd){ // 新密碼與確認(rèn)密碼一致 // 先清除兩個(gè)密碼的校驗(yàn)告警提示,目前是清除另一個(gè)密碼的不一致的提示 this.$refs['form'].clearValidate(['newPasswd','confirmPasswd']); callback(); }else{ callback(new Error('兩次密碼不一致')); } } return { form : { oldPasswd : '', newPasswd : '', confirmPasswd : '' }, //用于改變Input類型 password:"password", //用于更換Input中的圖標(biāo) icon:"el-input__icon el-icon-view", // 校驗(yàn)規(guī)則配置 rules: { oldPasswd : [ {required: true, message: "密碼不能為空", trigger: 'blur'} ], newPasswd : [ {required: true, message: "新密碼不能為空", trigger: 'blur'}, {min: 6, max: 18, message: "新密碼6-18位", trigger: 'blur'}, {validator: passwordValidator, trigger: 'blur'}, {validator: comparePasswdValidator,trigger: 'blur','getValuesMethod':this.getValuesMethod}, ], confirmPasswd : [ {required: true, message: "確認(rèn)密碼不能為空", trigger: 'blur'}, {min: 6, max: 18, message: "確認(rèn)密碼6-18位", trigger: 'blur'}, {validator: passwordValidator, trigger: 'blur'}, {validator: comparePasswdValidator,trigger: 'blur','getValuesMethod':this.getValuesMethod}, ], }, } }, methods: { // 獲取值的方法,為所有需要多字段聯(lián)合校驗(yàn)的校驗(yàn)器使用 getValuesMethod(){ return this.form; }, // 密碼的隱藏和顯示 showPassword(){ //點(diǎn)擊圖標(biāo)是密碼隱藏或顯示 if( this.password=="text"){ this.password="password"; //更換圖標(biāo) this.icon="el-input__icon el-icon-view"; }else { this.password="text"; this.icon="el-input__icon el-icon-stopwatch"; } }, // 提交 submit(){ let _this = this; this.$refs['form'].validate(valid => { // 驗(yàn)證通過(guò)為true,有一個(gè)不通過(guò)就是false if (valid) { _this.instance.changePasswd(_this.$baseUrl,_this.form).then(res => { if (res.data.code == _this.global.SucessRequstCode){ // 提示修改成功 alert("重新設(shè)置密碼已成功!"); // 跳轉(zhuǎn)到首頁(yè) this.$router.push({ path: '/home', }); }else{ if (!_this.commonFuncs.isInterceptorCode(res.data.code)){ alert(res.data.message); } } }).catch(error => { console.log(error); }); } }) }, // 取消 cancel(){ // 跳轉(zhuǎn)到首頁(yè) this.$router.push({ path: '/home', }); } } } </script>
??導(dǎo)入的外部校驗(yàn)器passwordValidator在/src/common/validator.js文件中,代碼如下:
/* 密碼校驗(yàn) */ export function passwordValidator(rule, value, callback) { const reg =/^[_a-zA-Z0-9@.#%&*!\-\$^]+$/; if(value == '' || value == undefined || value == null){ callback(); } else { if (!reg.test(value)){ callback(new Error('密碼由英文字母、數(shù)字以及下列字符組成:@.#%&*!_-$^')); } else { callback(); } } }
2.2.1、規(guī)則配置:
// 校驗(yàn)規(guī)則配置 rules: { oldPasswd : [ {required: true, message: "密碼不能為空", trigger: 'blur'} ], newPasswd : [ {required: true, message: "新密碼不能為空", trigger: 'blur'}, {min: 6, max: 18, message: "新密碼6-18位", trigger: 'blur'}, {validator: passwordValidator, trigger: 'blur'}, {validator: comparePasswdValidator,trigger: 'blur','getValuesMethod':this.getValuesMethod}, ], confirmPasswd : [ {required: true, message: "確認(rèn)密碼不能為空", trigger: 'blur'}, {min: 6, max: 18, message: "確認(rèn)密碼6-18位", trigger: 'blur'}, {validator: passwordValidator, trigger: 'blur'}, {validator: comparePasswdValidator,trigger: 'blur','getValuesMethod':this.getValuesMethod}, ], },
??重點(diǎn)是newPasswd和confirmPasswd屬性,兩個(gè)配置了相同的規(guī)則集,校驗(yàn)規(guī)則都為:
值不能為空。
長(zhǎng)度為6-18位。
符合密碼校驗(yàn)器passwordValidator的規(guī)則,即密碼由英文字母、數(shù)字以及下列字符組成:@.#%&*!_-$^。
比較密碼校驗(yàn)器comparePasswdValidator,這個(gè)校驗(yàn)器添加了一個(gè)自定義屬性getValuesMethod,屬性值為this的getValuesMethod方法,注意是方法,不是方法名。該條規(guī)則,要求methods中有一個(gè)getValuesMethod方法,并且實(shí)現(xiàn)comparePasswdValidator校驗(yàn)器。
??這些規(guī)則一起作用,所有規(guī)則都通過(guò)校驗(yàn),屬性校驗(yàn)才通過(guò),并且檢測(cè)次序按照數(shù)組的先后次序執(zhí)行。
??校驗(yàn)規(guī)則中,newPasswd和confirmPasswd屬性,都配置相同的comparePasswdValidator,是因?yàn)閮蓚€(gè)字段屬性值都是可變的。comparePasswdValidator排在規(guī)則的最后一條,即需要先滿足前面的校驗(yàn)規(guī)則。
2.2.2、getValuesMethod方法
// 獲取值的方法,為所有需要多字段聯(lián)合校驗(yàn)的校驗(yàn)器使用 getValuesMethod(){ return this.form; },
??getValuesMethod方法,返回data中form數(shù)據(jù)對(duì)象。這是一個(gè)很犀利的操作,相當(dāng)于提供了全局的數(shù)據(jù)探針,可以在校驗(yàn)器中訪問(wèn)data的form數(shù)據(jù)對(duì)象,并且由于form的v-modal模型,確保數(shù)據(jù)的實(shí)時(shí)性,即無(wú)需擔(dān)心獲取不到其它屬性的最新取值。getValuesMethod方法,提供了數(shù)據(jù)綁定的另類思路。
2.2.3、comparePasswdValidator校驗(yàn)器
// 比較兩次密碼是否相同 const comparePasswdValidator = (rule, value, callback) =>{ // 獲取獲取值的方法 var getvaluesMethod = rule.getValuesMethod; // 調(diào)用getvaluesMethod方法,獲取對(duì)象值 var formData = getvaluesMethod(); // 有一個(gè)為空,可能還沒(méi)有輸入值,此時(shí)不比較 if (formData.newPasswd == '' || formData.confirmPasswd == ''){ return callback(); } // =========================================================== // 比較兩次密碼 // 兩個(gè)都有值,比較 if (formData.newPasswd == formData.confirmPasswd){ // 新密碼與確認(rèn)密碼一致 // 先清除兩個(gè)密碼的校驗(yàn)告警提示,目前是清除另一個(gè)密碼的不一致的提示 this.$refs['form'].clearValidate(['newPasswd','confirmPasswd']); callback(); }else{ callback(new Error('兩次密碼不一致')); } }
??因?yàn)榕渲玫淖远x規(guī)則屬性'getValuesMethod'是一個(gè)指向this.getValuesMethod的方法,因此該屬性可以看作方法來(lái)調(diào)用:
// 獲取獲取值的方法 var getvaluesMethod = rule.getValuesMethod; // 調(diào)用getvaluesMethod方法,獲取對(duì)象值 var formData = getvaluesMethod();
??方法屬性的調(diào)用結(jié)果,返回了指向this.form的數(shù)據(jù)對(duì)象,于是就可以隨意訪問(wèn)該對(duì)象的屬性。
??在比較兩者之前,如果發(fā)現(xiàn)有一者為空,則返回。因?yàn)楫?dāng)前屬性輸入值之后,對(duì)端屬性可能還沒(méi)有輸入值,此時(shí)不應(yīng)該比較。
// 有一個(gè)為空,可能還沒(méi)有輸入值,此時(shí)不比較 if (formData.newPasswd == '' || formData.confirmPasswd == ''){ return callback(); }
??兩次密碼比較:
// =========================================================== // 比較兩次密碼 // 兩個(gè)都有值,比較 if (formData.newPasswd == formData.confirmPasswd){ // 新密碼與確認(rèn)密碼一致 // 先清除兩個(gè)密碼的校驗(yàn)告警提示,目前是清除另一個(gè)密碼的不一致的提示 this.$refs['form'].clearValidate(['newPasswd','confirmPasswd']); callback(); }else{ callback(new Error('兩次密碼不一致')); }
??兩次密碼比較,如果兩個(gè)密碼一致,就輸出告警提示。如果一致,則需要先清除對(duì)端的告警提示,因?yàn)榇藭r(shí)對(duì)端可能有”兩次密碼不一致“的提示。
// 先清除兩個(gè)密碼的校驗(yàn)告警提示,目前是清除另一個(gè)密碼的不一致的提示 this.$refs['form'].clearValidate(['newPasswd','confirmPasswd']);
??clearValidate方法,是element-form的方法,作用是清除一個(gè)或多個(gè)校驗(yàn)規(guī)則屬性的異常提示。
??這時(shí),是否會(huì)發(fā)生”誤殺“情況呢?即清除操作將對(duì)端的其它異常提示也清除了??紤]到此時(shí)兩次密碼相同,且兩者校驗(yàn)規(guī)則是相同的,由于此校驗(yàn)規(guī)則排在最后,從檢測(cè)次序來(lái)說(shuō),是最后執(zhí)行的,也就是說(shuō),執(zhí)行到本校驗(yàn)器時(shí),其它校驗(yàn)都通過(guò)了。因此,這種”誤殺“的情況不會(huì)發(fā)生。實(shí)際執(zhí)行效果也是如此。
??另外,需要注意的,此時(shí)不能用下列代碼代替上面clearValidate調(diào)用語(yǔ)句:
// 執(zhí)行對(duì)端的校驗(yàn) if (rule.field == 'newPasswd') { // 如果當(dāng)前屬性為newPasswd this.$refs['form'].validateField('confirmPasswd'); }else{ this.$refs['form'].validateField('newPasswd'); }
??因?yàn)?,此時(shí)正在執(zhí)行校驗(yàn),再調(diào)用對(duì)端校驗(yàn),會(huì)導(dǎo)致對(duì)端調(diào)用comparePasswdValidator,而對(duì)端校驗(yàn)結(jié)果發(fā)現(xiàn)兩次密碼一致,將再次調(diào)用對(duì)端(對(duì)端的對(duì)端,即本身)校驗(yàn),于是死循環(huán)了,導(dǎo)致調(diào)用堆棧溢出。因此,校驗(yàn)器代碼中,盡量不要再調(diào)用validateField方法。
??下面是一些效果圖:
??初始狀態(tài):
??修改確認(rèn)密碼,離開(kāi)輸入焦點(diǎn):
??進(jìn)入新密碼輸入框,不輸入,離開(kāi)輸入焦點(diǎn):
??修改確認(rèn)密碼,刪除尾部的字符"8",離開(kāi)輸入焦點(diǎn),此時(shí)又回到了初始狀態(tài)。
到此,相信大家對(duì)“Vue兩個(gè)字段聯(lián)合校驗(yàn)修改密碼功能的實(shí)現(xiàn)”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。