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-formref="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>