Pārlūkot izejas kodu

更改密码表单验证

dev_YWQ
congzc pirms 2 gadiem
vecāks
revīzija
42eb21545e
2 mainītis faili ar 74 papildinājumiem un 18 dzēšanām
  1. +0
    -1
      src/styles/my.scss
  2. +74
    -17
      src/views/myPassword/index.vue

+ 0
- 1
src/styles/my.scss Parādīt failu

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


div { div {
cursor: default; cursor: default;

} }


// 鼠标放上去变小手 // 鼠标放上去变小手


+ 74
- 17
src/views/myPassword/index.vue Parādīt failu

@@ -1,37 +1,94 @@
<template> <template>
<div class="page flex">
<div class="page">
<div>用户名</div>
<el-form <el-form
id="ruleForm"
ref="ruleFormRef"
:rules="rules"
:label-position="labelPosition" :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>
<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>
<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-item>
</el-form> </el-form>
</div> </div>
</template> </template>

<script setup> <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> </script>
<style lang="scss" scoped>

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


Notiek ielāde…
Atcelt
Saglabāt