vue3中自定义校验函数密码不生效问题

vue3中自定义校验函数密码不生效问题

由于在自定义的校验规则中只校验了有数据的情况，以至于在没输入时，校验不生效

（1）用户不输入校验不生效

const validateSurePassword = (rule, value, callback) => {
	if (value !== '') {
		if (value.length < 8) {
			callback(new Error('请输入至少8位确认密码'))
			return false
		} else if (value !== formState.newPassword) {
			callback(new Error('两次输入的新密码不一致'))
			return false
		} else {
			callback()
		}
	}
}
const validatePassword = (rule, value, callback) => {
	// const reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*])(?!.*\s).{8,}$/
	if (value !== '') {
		if (value.length < 8) {
			callback(new Error('请输入至少8位的密码'))
			return false
		} else if (!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*])(?!.*\s).{8,}$/.test(value)) {
			callback(new Error('密码必须包含大小字母、数字和特殊字符(@!*#$%&_=)'))
			return false
		} else {
			callback()
		}
	}
}

（2）改进上述自定义校验

const validateSurePassword = (rule, value, callback) => {
	if (value !== '') {
		if (value.length < 8) {
			callback(new Error('请输入至少8位确认密码'))
			return false
		} else if (value !== formState.newPassword) {
			callback(new Error('两次输入的新密码不一致'))
			return false
		} else {
			callback()
		}
	} else {
		callback(new Error('请输入确认密码'))
		return false
	}
}
const validatePassword = (rule, value, callback) => {
	// const reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*])(?!.*\s).{8,}$/
	if (value !== '') {
		if (value.length < 8) {
			callback(new Error('请输入至少8位的密码'))
			return false
		} else if (!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*])(?!.*\s).{8,}$/.test(value)) {
			callback(new Error('密码必须包含大小字母、数字和特殊字符(@!*#$%&_=)'))
			return false
		} else {
			callback()
		}
	} else {
		callback(new Error('请输入新密码'))
		return false
	}
}

（3）修改密码弹窗示例

<template>
	<AntDesign_Modal width="380px" :open="props.visible" @close="onCancel" titleText="修改密码">
		<template #body>
			<div class="changePW_body">
				<a-form
					ref="formRef"
					:model="formState"
					:label-col="{ span: 6 }"
					:wrapper-col="{ span: 18 }"
					autocomplete="off"
					:rules="userRules"
				>
					<a-form-item label="原密码" name="oldPassword">
						<a-input-password v-model:value="formState.oldPassword" placeholder="请输入原密码" />
					</a-form-item>
					<a-form-item label="新密码" name="newPassword">
						<a-input-password v-model:value="formState.newPassword" placeholder="请输入新密码" />
					</a-form-item>
					<a-form-item label="确认密码" name="passwdCheck">
						<a-input-password v-model:value="formState.passwdCheck" placeholder="请输入确认密码" />
					</a-form-item>
					<p class="_ps">
						<img class="warnIcon" src="@/assets/images/modal/warn.png" alt="" />
						提示：密码长度不少于8位，格式为大小写字母、数字及特殊字符组合
					</p>
					<div class="buttonBox">
						<a-button type="primary" @click="onSure" html-type="submit"> 确定</a-button>
						<Button @click="onCancel">取消</Button>
					</div>
				</a-form>
			</div>
		</template>
	</AntDesign_Modal>
</template>
<script setup>
import { reactive, ref, watch } from 'vue'
import { Button, message } from 'ant-design-vue'
import { updatePassword } from '@/api/login/login'
import AntDesign_Modal from '@/components/antDesign/AntDesign_modal/index.vue'
import { Base64 } from 'js-base64'
import store from '@/store'

const props = defineProps({
	visible: {
		type: Boolean,
		default: false
	}
})

const emit = defineEmits(['onCancel'])

const formRef = ref(null)

watch(
	() => props.visible,
	() => {
		if (formRef.value) {
			formRef.value?.resetFields()
		}
	}
)

const formState = reactive({
	oldPassword: '',
	newPassword: '',
	passwdCheck: ''
})

const validateSurePassword = (rule, value, callback) => {
	if (value !== '') {
		if (value.length < 8) {
			callback(new Error('请输入至少8位确认密码'))
			return false
		} else if (value !== formState.newPassword) {
			callback(new Error('两次输入的新密码不一致'))
			return false
		} else {
			callback()
		}
	} else {
		callback(new Error('请输入确认密码'))
		return false
	}
}

const validatePassword = (rule, value, callback) => {
	// const reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*])(?!.*\s).{8,}$/
	if (value !== '') {
		if (value.length < 8) {
			callback(new Error('请输入至少8位的密码'))
			return false
		} else if (!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*])(?!.*\s).{8,}$/.test(value)) {
			callback(new Error('密码必须包含大小字母、数字和特殊字符(@!*#$%&_=)'))
			return false
		} else {
			callback()
		}
	} else {
		callback(new Error('请输入新密码'))
		return false
	}
}

const userRules = reactive({
	oldPassword: [
		{
			required: true,
			message: '请输入旧密码',
			trigger: 'blur'
		}
	],
	newPassword: [
		{
			required: true,
			validator: validatePassword,
			trigger: 'blur'
		}
	],
	passwdCheck: [{ required: true, validator: validateSurePassword, trigger: 'blur' }]
})

const handleSubmit = () => {
	const data = {
		oldPassword: Base64.encode(formState.oldPassword),
		newPassword: Base64.encode(formState.newPassword),
		userId: store.getters.userMessage?.id
	}
	updatePassword(data).then(() => {
		message.success('修改密码成功！')
		emit('onCancel')
	})
}

const onSure = () => {
	formRef.value.validate().then(() => {
		handleSubmit()
	})
}

const onCancel = () => {
	emit('onCancel')
}
</script>

<style lang="less" scoped>
.changePW_body {
	._modalBody {
		padding: 0;
	}

	._ps {
		color: #165dff;
		font-size: 12px;
		margin-top: 12px;

		.warnIcon {
			margin-right: 9px;
		}
	}

	.buttonBox {
		text-align: center;

		.ant-btn {
			margin: 26px 5px 0 5px;
		}
	}

	.ant-form-item {
		margin-bottom: 0 !important;
		margin-top: 19px !important;
		margin-right: 16px;
	}

	:deep(.ant-input-password) {
		width: 237px !important;
	}

	:deep(.ant-input-affix-wrapper) {
		width: 237px !important;
	}
}
</style>