苏州网站建设丨好先生科技,校园设计网站,北京市建设工程信息网交易网,wordpress恢复小工具vue3中自定义校验函数密码不生效问题
由于在自定义的校验规则中只校验了有数据的情况#xff0c;以至于在没输入时#xff0c;校验不生效
#xff08;1#xff09;用户不输入校验不生效
const validateSurePassword (rule, value, callback) {if (value ! ) {if (…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修改密码弹窗示例
templateAntDesign_Modal width380px :openprops.visible closeonCancel titleText修改密码template #bodydiv classchangePW_bodya-formrefformRef:modelformState:label-col{ span: 6 }:wrapper-col{ span: 18 }autocompleteoff:rulesuserRulesa-form-item label原密码 nameoldPassworda-input-password v-model:valueformState.oldPassword placeholder请输入原密码 //a-form-itema-form-item label新密码 namenewPassworda-input-password v-model:valueformState.newPassword placeholder请输入新密码 //a-form-itema-form-item label确认密码 namepasswdChecka-input-password v-model:valueformState.passwdCheck placeholder请输入确认密码 //a-form-itemp class_psimg classwarnIcon src/assets/images/modal/warn.png alt /提示密码长度不少于8位格式为大小写字母、数字及特殊字符组合/pdiv classbuttonBoxa-button typeprimary clickonSure html-typesubmit 确定/a-buttonButton clickonCancel取消/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 /storeconst 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)
}
/scriptstyle langless 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
