yd_qycpfb/jp-mobile/pages/user/setting/password/password.vue

<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">修改密码</block>
		</cu-custom>
		<form @submit="formSubmit">
			<view class="cu-form-group margin-top">
				<view class="title"> <text class="red-color">*</text> 旧密码</view>
				<input placeholder="请输入原密码" type="password" v-model="inputForm.oldPassword" name="oldPassword"></input>
			</view>
			<view class="cu-form-group">
				<view class="title"><text class="red-color">*</text>新密码</view>
				<input placeholder="请输入新密码" type="password" v-model="inputForm.newPassword" name="newPassword"></input>
			</view>
			<view class="cu-form-group">
				<view class="title"><text class="red-color">*</text>确认新密码</view>
				<input placeholder="请确认新密码" type="password" v-model="inputForm.confirmNewPassword" name="confirmNewPassword"></input>
			</view>
			<view class="info">注意：密码须同时包含大小写字母、数字及特殊字符，长度 8-20 位</view>
			<view class="padding-xl">
				<button form-type="submit" class="cu-btn block bg-blue margin-tb-sm lg" >提交</button>
			</view>
		</form>
	</view>
</template>

<script>
  import userService from "@/api/sys/userService"	
  import * as $auth from "@/common/auth"
  var  graceChecker = require("@/common/graceChecker.js");
  export default {
	onShow() {
	  this.$auth.checkLogin()
	},
	data () {
		return {
			loading: false,
			inputForm: {
				oldPassword: '',
				newPassword: '',
				confirmNewPassword: ''
			}
		}
	},

    methods:{
		formSubmit: function (e) {
		  // 原有 graceChecker 规则保留
		  var rule = [
		    {name:"oldPassword", checkType:"notnull", errorMsg:"密码不能为空"},
		    {name:"newPassword", checkType:"notnull", errorMsg:"新密码不能为空"},
		    {name:"confirmNewPassword", checkType:"notnull", errorMsg:"确认新密码不能为空"},
		    {name:"confirmNewPassword", checkType:"same", checkRule:this.inputForm.newPassword, errorMsg:"两次输入的新密码不一致，请重新输入!"}
		  ];
		  var formData = e.detail.value;
		  if(!graceChecker.check(formData, rule)){
		    uni.showToast({title: graceChecker.error, icon:"none"});
		    return;
		  }
		
		  /* ========== 新规则校验 ========== */
		  const pwd = this.inputForm.newPassword;
		  if(pwd.length<8 || pwd.length>20){
		    uni.showToast({icon:'none',title:'密码长度为 8-20 位'});
		    return;
		  }
		  // 必须同时包含：大写、小写、数字、特殊字符
		  if(!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^A-Za-z0-9])/.test(pwd)){
		    uni.showToast({icon:'none',title:'密码须同时包含大小写字母、数字及特殊字符'});
		    return;
		  }
		
		  /* ========== 提交后台 ========== */
		  uni.showLoading();
		  userService.savePwd(this.inputForm).then(({data})=>{
		    uni.showToast({title:data, icon:"success"});
		    const which = $auth.whichLogin();
		    uni.reLaunch({url: which=='dzf' ? '/pages/login/dzflogin' : '/pages/login/login'});
		  }).catch(()=>{});
		}
    }
  }
</script>

<style>
  .btn-logout {
    margin-top: 100upx;
    width: 80%;
    border-radius: 50upx;
    font-size: 16px;
    color: #fff;
    background: linear-gradient(to right, #365fff, #36bbff);
  }

  .btn-logout-hover {
    background: linear-gradient(to right, #365fdd, #36bbfa);
  }
  .cu-form-group .title {
  	min-width: calc(4em + 40px);
  }
  
  .info{
  	margin-top: 30rpx;
  	font-size: 30rpx;
  	color: #333;
	padding-left: 20rpx;
  }
</style>