From 29d8f968bf84e9c89a24fe33ef51fb5c0aed0ab1 Mon Sep 17 00:00:00 2001 From: 819527061@qq.com <123456> Date: 星期二, 11 六月 2024 15:33:15 +0800 Subject: [PATCH] docs:密码轻度细节问题 --- pages/register/register.vue | 279 +++++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 225 insertions(+), 54 deletions(-) diff --git a/pages/register/register.vue b/pages/register/register.vue index e37c976..4a54f9c 100644 --- a/pages/register/register.vue +++ b/pages/register/register.vue @@ -57,17 +57,71 @@ borderBottom required> <u--input v-model="registerFormModel.password" - placeholder="璇疯緭鍏ュ唴瀹�" + placeholder="瀵嗙爜搴旂敱8-16浣嶆暟瀛椼�佸瓧姣嶃�佺鍙风粍鎴愩�傝涓嶈浣跨敤瀹规槗琚寽鍒扮殑瀵嗙爜" password clearable></u--input> </u-form-item> + <view class="intensity"> + <view class="psdText">瀵嗙爜寮哄害</view> + <view + class="line" + :class="[level.includes('low') ? 'low' : '']"></view> + <view + class="line" + :class="[level.includes('middle') ? 'middle' : '']"></view> + <view + class="line" + :class="[level.includes('high') ? 'high' : '']"></view> + <div class="warningtext"> + 瀵嗙爜搴旂敱8-16浣嶆暟瀛椼�佸瓧姣嶃�佺鍙风粍鎴愩�傝涓嶈浣跨敤瀹规槗琚寽鍒扮殑瀵嗙爜 + </div> + </view> <u-form-item prop="confirmPassword" label="纭瀵嗙爜" labelWidth="20%" borderBottom required> <u--input v-model="registerFormModel.confirmPassword" - placeholder="璇疯緭鍏ュ唴瀹�" + placeholder="璇峰啀娆¤緭鍏ュ瘑鐮�" + password + clearable + @blur="jiaoYanPassword"></u--input> + </u-form-item> + <!-- 瀹㈡埛鐙湁鐨� 鏄惁绠$悊鍛�--> + + <u-form-item labelWidth="30%" + label="鏄惁绠$悊鍛�" + borderBottom + prop="isHostUser" + v-if="radiovalue1 == '瀹㈡埛'" + ref="roleRef" + required> + <u-radio-group v-model="registerFormModel.isHostUser" + placement="row" + size="30" + shape="circle" + iconSize="20"> + <u-radio labelSize="14px" + size="20px" + :key="0" + :label="'鏄�'" + :name="0"></u-radio> + <u-radio labelSize="14px" + size="20px" + :key="1" + :label="'鍚�'" + :name="1"></u-radio> + </u-radio-group> + </u-form-item> + + <u-form-item prop="invitationCode" + label="閭�璇风爜" + v-if="radiovalue1 == '瀹㈡埛'" + labelWidth="20%" + borderBottom + required> + <u--input v-model="registerFormModel.invitationCode" + placeholder="璇疯緭鍏ラ個璇风爜" password clearable @blur="jiaoYanPassword"></u--input> @@ -176,7 +230,7 @@ :previewFullImage="true"> </u-upload> </u-form-item> - <u-form-item label="鏄惁闈炵叅杞﹁締" + <!-- <u-form-item label="鏄惁闈炵叅杞﹁締" v-if="radiovalue1 == '鍙告満'" labelWidth="30%" borderBottom @@ -189,7 +243,7 @@ label-size="30"> </u-checkbox> </u-checkbox-group> - </u-form-item> + </u-form-item> --> <u-form-item labelWidth="20%" v-if="radiovalue1 == '鍙告満'" label="杞﹁締绫诲瀷" @@ -241,7 +295,83 @@ } }, data() { + const validatePass = (rule, value, callback) => { + if (this.registerFormModel.confirmPassword !== "") { + if (value !== this.registerFormModel.password) { + callback(new Error("涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷�!")); + } else { + callback(); + } + } else { + callback(); + } + }; + const checkPassword = (rule, value, callback) => { + // let roles = this.$store.getters.roles;//褰撳墠鐢ㄦ埛瑙掕壊id + // let passL = 8; + // if (roles.concat(1)){ + // passL = 10 + // } + let passL = 8; + this.level = [] + if(!value) { + return callback('瀵嗙爜涓嶈兘涓虹┖') + } + if(value.length < passL) { + return callback(`瀵嗙爜涓嶈兘灏戜簬${passL}浣峘) + } + if(value.length > 16) { + return callback('瀵嗙爜涓嶈兘澶т簬16浣�') + } + //鏍¢獙鏄暟瀛� + const regex1 = /^\d+$/ + // 鏍¢獙瀛楁瘝 + const regex2 = /^[A-Za-z]+$/ + // 鏍¢獙绗﹀彿 + const regex3 = + /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]路~锛丂#锟�%鈥︹��&*锛堬級鈥斺�擻-+={}|銆娿�嬶紵锛氣�溾�濄�愩�戙�侊紱鈥�'锛屻�傘�乚+$/ + if(regex1.test(value)) { + this.level.push('low') + return callback('瀵嗙爜寮哄害杩囦綆') + }else if(regex2.test(value)) { + this.level.push('low') + return callback('瀵嗙爜寮哄害杩囦綆') + }else if(regex3.test(value)) { + this.level.push('low') + return callback('瀵嗙爜寮哄害杩囦綆') + }else if(/^[A-Za-z\d]+$/.test(value)) { + this.level.push('low') + this.level.push('middle') + return callback('瀵嗙爜寮哄害杩囦綆') + }else if( + /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]路~锛丂#锟�%鈥︹��&*锛堬級鈥斺�擻-+={}|銆娿�嬶紵锛氣�溾�濄�愩�戙�侊紱鈥�'锛屻�傘�乗d]+$/.test( + value + ) + ) { + this.level.push('low') + this.level.push('middle') + return callback('瀵嗙爜寮哄害杩囦綆') + }else if( + /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]路~锛丂#锟�%鈥︹��&*锛堬級鈥斺�擻-+={}|銆娿�嬶紵锛氣�溾�濄�愩�戙�侊紱鈥�'锛屻�傘�丄-Za-z]+$/.test( + value + ) + ) { + this.level.push('low') + this.level.push('middle') + return callback('瀵嗙爜寮哄害杩囦綆') + } else if ( + /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]路~锛丂#锟�%鈥︹��&*锛堬級鈥斺�擻-+={}|銆娿�嬶紵锛氣�溾�濄�愩�戙�侊紱鈥�'锛屻�傘�丄-Za-z\d]+$/.test( + value + ) + ) { + this.level.push('low') + this.level.push('middle') + this.level.push('high') + } + return callback() + }; return { + level:[], //瀵嗙爜寮哄害鏁扮粍 // 杞︾墝鍙烽敭鐩樻帶鍒� carNumShow: false, keyValue: '', @@ -253,10 +383,12 @@ openId: '', type: 3, idCard: '', + isHostUser:'', carNo: '', carImg: '', drivingImg: '', tuiJianMa: '', + invitationCode:'', //閭�璇风爜 confirmPassword: '', tradeQualificationImg: '', roadTransportImg: '', @@ -320,23 +452,16 @@ message: '璇疯缃垵濮嬪瘑鐮�', trigger: ['blur', 'change'] }, - { - min: 6, - max: 12, - message: '闀垮害鍦�6-12涓瓧绗︿箣闂�' - } + { + validator: checkPassword, + trigger: 'change' + } ], confirmPassword: [{ - required: true, - message: '璇疯缃垵濮嬪瘑鐮�', - trigger: ['blur', 'change'] - }, - { - min: 6, - max: 12, - message: '闀垮害鍦�6-12涓瓧绗︿箣闂�' - } - ], + required: true, + validator: validatePass, + trigger: "blur" + }], carNo: [{ type: 'string', required: true, @@ -386,6 +511,10 @@ { name: '璐т唬', disabled: false + }, + { + name: '瀹㈡埛', + disabled: false } ], countryNumberCarList: [{ @@ -395,6 +524,10 @@ { name: 2, label: '鍥藉叚', + }, + { + name: 3, + label: '鏂拌兘婧�', } ], radiovalue1: '鍙告満', @@ -425,6 +558,9 @@ case '鍙告満': this.registerFormModel.type = 3; break; + case '瀹㈡埛': + this.registerFormModel.type = 1; + break; default: break; } @@ -434,40 +570,36 @@ methods: { ...mapMutations(['changeisUploadimg']), registerClick() { - if (this.registerFormModel.password == this.registerFormModel.confirmPassword) { - this.$refs.regesterFormRef - .validate() - .then(res => { - console.log(this.registerFormModel); - this.registerClickloading = true; - this.registerFormModel.username = this.registerFormModel.phone; - apiRegister(this.registerFormModel) - .then(res => { - this.registerClickloading = false; - if (res.data.code == 0) { - uni.showToast({ - title: '娉ㄥ唽鎴愬姛,鍗冲皢杩斿洖鐧诲綍椤�', - icon: 'none', - duration: 1000 - }); - setTimeout(() => { - uni.redirectTo({ url: '/pages/login/login' }); - }, 1000); - } else { - this.$u.toast(res.data.msg ? res.data.msg : '娣诲姞澶辫触'); - } - }) - .catch(err => { - console.log('閿欒', err); - }); - }) - .catch(err => { - console.log('err', err); - this.$u.toast('璇疯鑼冭緭鍏ュ唴瀹�'); - }); - } else { - this.$u.toast('涓ゆ瀵嗙爜涓嶄竴鑷�'); - } + this.$refs.regesterFormRef + .validate() + .then(res => { + console.log(this.registerFormModel,'isHostUserisHostUser'); + this.registerClickloading = true; + this.registerFormModel.username = this.registerFormModel.phone; + apiRegister(this.registerFormModel) + .then(res => { + this.registerClickloading = false; + if (res.data.code == 0) { + uni.showToast({ + title: '娉ㄥ唽鎴愬姛,鍗冲皢杩斿洖鐧诲綍椤�', + icon: 'none', + duration: 1000 + }); + setTimeout(() => { + uni.redirectTo({ url: '/pages/login/login' }); + }, 1000); + } else { + this.$u.toast(res.data.msg ? res.data.msg : '娣诲姞澶辫触'); + } + }) + .catch(err => { + console.log('閿欒', err); + }); + }) + .catch(err => { + console.log('err', err); + this.$u.toast('璇疯鑼冭緭鍏ュ唴瀹�'); + }); }, // 鍗曢�夋浜嬩欢 groupChange(e) {}, @@ -614,4 +746,43 @@ } } } -</style> \ No newline at end of file + .intensity { + width: 100%; + margin-top: 10rpx; + .psdText { + font-size: 14px; + margin-right: 10px; + } + + .line { + display: inline-block; + width: 70rpx; + height: 8rpx; + background: #d8d8d8; + border-radius: 6rpx; + margin-right: 16rpx; + + &.low { + background: #f4664a; + } + + &.middle { + background: #ffb700; + } + + &.high { + background: #2cbb79; + } + } + + .level { + margin: 0 32rpx 0 16rpx; + } + + .warningtext { + color: #5a5a5a; + font-size: 24rpx; + margin-top: 10rpx; + } + } +</style> -- Gitblit v1.9.1