Bladeren bron

更改密码表单验证

dev_YWQ
congzc 2 jaren geleden
bovenliggende
commit
42eb21545e
2 gewijzigde bestanden met toevoegingen van 74 en 18 verwijderingen
  1. +0
    -1
      src/styles/my.scss
  2. +74
    -17
      src/views/myPassword/index.vue

+ 0
- 1
src/styles/my.scss Bestand weergeven

@@ -8,7 +8,6 @@

div {
cursor: default;

}

// 鼠标放上去变小手


+ 74
- 17
src/views/myPassword/index.vue Bestand weergeven

@@ -1,37 +1,94 @@
<template>
<div class="page flex">
<div class="page">
<div>用户名</div>
<el-form
id="ruleForm"
ref="ruleFormRef"
:rules="rules"
:label-position="labelPosition"
label-width="100px"
:model="formLabelAlign"
style="max-width: 460px"
label-width="120px"
:model="formData"
style="max-width: 500px"
>
<el-form-item label="Name">
<el-input v-model="formLabelAlign.name" />
<el-form-item label="旧密码" prop="oldPassword">
<el-input v-model="formData.oldPassword" />
</el-form-item>
<el-form-item label="Activity zone">
<el-input v-model="formLabelAlign.region" />
<el-form-item label="新密码" prop="newPassword">
<el-input v-model="formData.newPassword" />
</el-form-item>
<el-form-item label="Activity form">
<el-input v-model="formLabelAlign.type" />
<el-form-item label="再次输入新密码" prop="newPassword2">
<el-input v-model="formData.newPassword2" />
</el-form-item>

<el-form-item>
<el-button type="primary" @click="submitForm(ruleFormRef)"
>确认修改</el-button
>
</el-form-item>
</el-form>
</div>
</template>

<script setup>
const labelPosition = ref("right");
import { ref, reactive } from "vue";

const formLabelAlign = reactive({
name: "",
region: "",
type: "",
const labelPosition = ref("right");
const formData = reactive({
oldPassword: "",
newPassword: "",
newPassword2: "",
});

const validateNewPass = (rule, value, callback) => {
// 自定义校验规则,例如密码必须包含数字和字母
if (!/^(?=.*[a-zA-Z])(?=.*\d).{8,}$/.test(value)) {
callback(new Error("密码必须包含数字和字母,且至少8位"));
} else {
callback();
}
};

const validateNewPass2 = (rule, value, callback) => {
if (value !== formData.newPassword) {
callback(new Error("两次输入的新密码不一致"));
} else {
callback();
}
};

const rules = {
oldPassword: [
{ required: true, message: "请输入旧密码", trigger: "blur" },
{ validator: validateNewPass, trigger: "blur" },
],
newPassword: [
{ required: true, message: "请输入新密码", trigger: "blur" },
{ validator: validateNewPass, trigger: "blur" },
],
newPassword2: [
{ required: true, message: "请再次输入新密码", trigger: "blur" },
{ validator: validateNewPass2, trigger: "blur" },
],
};

const ruleFormRef = ref();
// 点击提交
const submitForm = async (formEl) => {
if (!formEl) return;
await formEl.validate((valid) => {
if (valid) {
console.log("submit!");
} else {
console.log("error submit!");
}
});
};
</script>
<style lang="scss" scoped>

<style scoped>
.page {
height: 887px;
padding: 20px 0 0 20px;
// height: calc(100vh - 84px);
background-color: #fff;
border-radius: 25px 0 0;
}


Laden…
Annuleren
Opslaan