password
This commit is contained in:
吕才卓
parent
351232b4be
commit
a25572301d
2
package-lock.json
generated
2
package-lock.json
generated
|
|
@ -1605,7 +1605,7 @@
|
|||
},
|
||||
"node_modules/pinia-plugin-persistedstate": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmmirror.com/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.2.1.tgz",
|
||||
"resolved": "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.2.1.tgz",
|
||||
"integrity": "sha512-MK++8LRUsGF7r45PjBFES82ISnPzyO6IZx3CH5vyPseFLZCk1g2kgx6l/nW8pEBKxxd4do0P6bJw+mUSZIEZUQ==",
|
||||
"peerDependencies": {
|
||||
"pinia": "^2.0.0"
|
||||
|
|
|
|||
|
|
@ -74,12 +74,8 @@ const rules = reactive({
|
|||
message: "必须填写",
|
||||
},
|
||||
{
|
||||
min: 10,
|
||||
message: "输入不正确",
|
||||
},
|
||||
{
|
||||
max: 10,
|
||||
message: "输入不正确",
|
||||
pattern: /^\d{10}$/, // 正则表达式只允许10位数字
|
||||
message: "学号必须是10位数字",
|
||||
},
|
||||
],
|
||||
password: [
|
||||
|
|
@ -92,36 +88,17 @@ const rules = reactive({
|
|||
message: "请输入 8 位密码",
|
||||
},
|
||||
{
|
||||
pattern: /[A-Z]+/,
|
||||
message: "密码必须包含大写字母",
|
||||
pattern: /^(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{8,}$/u,
|
||||
message: "密码必须包含至少一个大写字母，并由字母和数字组成",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const onReset = () => {
|
||||
// 清空表单数据
|
||||
formData.account = "";
|
||||
formData.password = "";
|
||||
MessagePlugin.success("重置成功");
|
||||
};
|
||||
// const onSubmit = () => {
|
||||
// this.$refs.form.validateResult((valid,errors) => {
|
||||
// console.log(valid);
|
||||
// if (valid) {
|
||||
// MessagePlugin.success("提交成功");
|
||||
// } else {
|
||||
// MessagePlugin.error("提交失败");
|
||||
// console.log("Errors: ", errors);
|
||||
// return false;
|
||||
// }
|
||||
// });
|
||||
// };
|
||||
|
||||
const onSubmit = async () => {
|
||||
try {
|
||||
const validateResult = await this.$refs.form.validate();
|
||||
if (validateResult.result) {
|
||||
await reqUser();
|
||||
await reqUser(formData.account, formData.password);
|
||||
MessagePlugin.success("提交成功");
|
||||
await router.push("/");
|
||||
} else {
|
||||
|
|
@ -135,18 +112,13 @@ const onSubmit = async () => {
|
|||
}
|
||||
};
|
||||
|
||||
// const Login = async () => {
|
||||
// await reqUser();
|
||||
// };
|
||||
|
||||
onMounted(() => {
|
||||
reqUser();
|
||||
});
|
||||
|
||||
function handleForgotPasswordClick() {
|
||||
router.push("/password-reset")
|
||||
router.push("/password-reset");
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -48,132 +48,105 @@ import { reactive } from "vue";
|
|||
import router from "@/router";
|
||||
|
||||
const INITIAL_DATA = {
|
||||
account: '',
|
||||
password: '',
|
||||
rePassword: '',
|
||||
account: "",
|
||||
password: "",
|
||||
rePassword: "",
|
||||
};
|
||||
|
||||
const formData = reactive({
|
||||
...INITIAL_DATA,
|
||||
});
|
||||
|
||||
const rules = reactive({
|
||||
account: [
|
||||
{
|
||||
required: true,
|
||||
message: '学号必填',
|
||||
type: 'error',
|
||||
},
|
||||
{
|
||||
min: 10,
|
||||
message: "输入不正确",
|
||||
},
|
||||
{
|
||||
max: 10,
|
||||
message: "输入不正确",
|
||||
},
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: '密码必填',
|
||||
type: 'error',
|
||||
},
|
||||
{
|
||||
len: 8,
|
||||
message: "请输入 8 位密码",
|
||||
},
|
||||
{
|
||||
pattern: /[A-Z]+/,
|
||||
message: "密码必须包含大写字母",
|
||||
},
|
||||
],
|
||||
rePassword: [
|
||||
{
|
||||
required: true,
|
||||
message: '密码必填',
|
||||
type: 'error',
|
||||
},
|
||||
{
|
||||
len: 8,
|
||||
message: "请输入 8 位密码",
|
||||
},
|
||||
{
|
||||
pattern: /[A-Z]+/,
|
||||
message: "密码必须包含大写字母",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const onReset = () => {
|
||||
MessagePlugin.success('重置成功');
|
||||
};
|
||||
|
||||
const onSubmit = ({ validateResult, firstError }) => {
|
||||
if (validateResult === true) {
|
||||
MessagePlugin.success('提交成功');
|
||||
} else {
|
||||
console.log('Errors: ', validateResult);
|
||||
MessagePlugin.warning(firstError);
|
||||
}
|
||||
};
|
||||
const onValidate = ({ validateResult, firstError }) => {
|
||||
if (validateResult === true) {
|
||||
console.log('Validate Success');
|
||||
} else {
|
||||
console.log('Validate Errors: ', firstError, validateResult);
|
||||
}
|
||||
};
|
||||
// 自定义异步校验器，使用 resolve 返回结果控制校验结果、校验信息、校验结果类型
|
||||
const userNameValidator = (val) => new Promise((resolve) => {
|
||||
const timer = setTimeout(() => {
|
||||
if (['Zhang', 'Li', 'Wang'].includes(val)) {
|
||||
resolve({
|
||||
result: true,
|
||||
});
|
||||
} else {
|
||||
resolve({
|
||||
result: false,
|
||||
message: '用户名不存在',
|
||||
type: 'error',
|
||||
});
|
||||
}
|
||||
clearTimeout(timer);
|
||||
}, 10);
|
||||
});
|
||||
// 自定义校验器，不同的值输出不同的校验结果。支持异步校验（文案选自某密码重置站点，如有侵权，请联系我们删除）
|
||||
const passwordValidator = (val) => {
|
||||
if (val.length > 0 && val.length <= 2) {
|
||||
return {
|
||||
result: false,
|
||||
message: '太简单了！再开动一下你的小脑筋吧！',
|
||||
type: 'error',
|
||||
};
|
||||
}
|
||||
if (val.length > 2 && val.length < 4) {
|
||||
return {
|
||||
result: false,
|
||||
message: '还差一点点，就是一个完美的密码了！',
|
||||
type: 'warning',
|
||||
};
|
||||
}
|
||||
return {
|
||||
result: true,
|
||||
message: '太强了，你确定自己记得住吗！',
|
||||
type: 'success',
|
||||
};
|
||||
};
|
||||
// 自定义异步校验器
|
||||
const rePassword = (val) => new Promise((resolve) => {
|
||||
const rePassword = (val) =>
|
||||
new Promise((resolve) => {
|
||||
const timer = setTimeout(() => {
|
||||
resolve(formData.password === val);
|
||||
clearTimeout(timer);
|
||||
});
|
||||
});
|
||||
|
||||
const rules = reactive({
|
||||
account: [
|
||||
{
|
||||
required: true,
|
||||
message: "学号必填",
|
||||
type: "error",
|
||||
},
|
||||
{
|
||||
pattern: /^\d{10}$/, // 正则表达式只允许10位数字
|
||||
message: "学号必须是10位数字",
|
||||
},
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: "密码必填",
|
||||
type: "error",
|
||||
},
|
||||
{
|
||||
len: 8,
|
||||
message: "请输入 8 位密码",
|
||||
},
|
||||
{
|
||||
pattern: /^(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{8,}$/u,
|
||||
message: "密码必须包含至少一个大写字母，并由字母和数字组成",
|
||||
},
|
||||
],
|
||||
rePassword: [
|
||||
{
|
||||
required: true,
|
||||
message: "密码必填",
|
||||
type: "error",
|
||||
},
|
||||
{
|
||||
len: 8,
|
||||
message: "请输入 8 位密码",
|
||||
},
|
||||
{
|
||||
pattern: /[A-Z]+/,
|
||||
message: "密码必须包含大写字母",
|
||||
},
|
||||
{
|
||||
validator: rePassword,
|
||||
trigger: ["blur", "change"],
|
||||
message: "两次密码不一致",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const onReset = () => {
|
||||
MessagePlugin.success("重置成功");
|
||||
};
|
||||
|
||||
const onSubmit = async () => {
|
||||
try {
|
||||
const validateResult = await this.$refs.form.validate();
|
||||
if (validateResult.result) {
|
||||
await reqUser(formData.account, formData.password, formData.rePassword);
|
||||
MessagePlugin.success("提交成功");
|
||||
await router.push("/login");
|
||||
} else {
|
||||
const firstError = validateResult.errors[0]?.message || "未知错误";
|
||||
console.log("Errors: ", validateResult.errors);
|
||||
MessagePlugin.warning(firstError);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("请求失败:", error);
|
||||
MessagePlugin.error("提交失败");
|
||||
}
|
||||
};
|
||||
|
||||
const onValidate = ({ validateResult, firstError }) => {
|
||||
if (validateResult === true) {
|
||||
onSubmit();
|
||||
console.log("Validate Success");
|
||||
} else {
|
||||
console.log("Validate Errors: ", firstError, validateResult);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
.password-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -43,5 +43,5 @@ import { MessagePlugin } from "tdesign-vue-next";
|
|||
import { ref } from "vue";
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
</style>
|
||||
|
|
@ -11,7 +11,7 @@ export default defineConfig({
|
|||
server: {
|
||||
proxy: {
|
||||
"/api": {
|
||||
target: "http://192.168.1.10:8000",
|
||||
target: "http://192.168.1.10:8080",
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user