|
|
@@ -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; |
|
|
|
} |
|
|
|