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": {
|
"node_modules/pinia-plugin-persistedstate": {
|
||||||
"version": "3.2.1",
|
"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==",
|
"integrity": "sha512-MK++8LRUsGF7r45PjBFES82ISnPzyO6IZx3CH5vyPseFLZCk1g2kgx6l/nW8pEBKxxd4do0P6bJw+mUSZIEZUQ==",
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"pinia": "^2.0.0"
|
"pinia": "^2.0.0"
|
||||||
|
|
|
@ -74,12 +74,8 @@ const rules = reactive({
|
||||||
message: "必须填写",
|
message: "必须填写",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
min: 10,
|
pattern: /^\d{10}$/, // 正则表达式只允许10位数字
|
||||||
message: "输入不正确",
|
message: "学号必须是10位数字",
|
||||||
},
|
|
||||||
{
|
|
||||||
max: 10,
|
|
||||||
message: "输入不正确",
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
password: [
|
password: [
|
||||||
|
@ -92,36 +88,17 @@ const rules = reactive({
|
||||||
message: "请输入 8 位密码",
|
message: "请输入 8 位密码",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
pattern: /[A-Z]+/,
|
pattern: /^(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{8,}$/u,
|
||||||
message: "密码必须包含大写字母",
|
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 () => {
|
const onSubmit = async () => {
|
||||||
try {
|
try {
|
||||||
const validateResult = await this.$refs.form.validate();
|
const validateResult = await this.$refs.form.validate();
|
||||||
if (validateResult.result) {
|
if (validateResult.result) {
|
||||||
await reqUser();
|
await reqUser(formData.account, formData.password);
|
||||||
MessagePlugin.success("提交成功");
|
MessagePlugin.success("提交成功");
|
||||||
await router.push("/");
|
await router.push("/");
|
||||||
} else {
|
} else {
|
||||||
|
@ -135,18 +112,13 @@ const onSubmit = async () => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// const Login = async () => {
|
|
||||||
// await reqUser();
|
|
||||||
// };
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
reqUser();
|
reqUser();
|
||||||
});
|
});
|
||||||
|
|
||||||
function handleForgotPasswordClick() {
|
function handleForgotPasswordClick() {
|
||||||
router.push("/password-reset")
|
router.push("/password-reset");
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|
|
@ -48,132 +48,105 @@ import { reactive } from "vue";
|
||||||
import router from "@/router";
|
import router from "@/router";
|
||||||
|
|
||||||
const INITIAL_DATA = {
|
const INITIAL_DATA = {
|
||||||
account: '',
|
account: "",
|
||||||
password: '',
|
password: "",
|
||||||
rePassword: '',
|
rePassword: "",
|
||||||
};
|
};
|
||||||
|
|
||||||
const formData = reactive({
|
const formData = reactive({
|
||||||
...INITIAL_DATA,
|
...INITIAL_DATA,
|
||||||
});
|
});
|
||||||
|
|
||||||
const rules = reactive({
|
const rePassword = (val) =>
|
||||||
account: [
|
new Promise((resolve) => {
|
||||||
{
|
|
||||||
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 timer = setTimeout(() => {
|
const timer = setTimeout(() => {
|
||||||
resolve(formData.password === val);
|
resolve(formData.password === val);
|
||||||
clearTimeout(timer);
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="less" scoped>
|
||||||
.password-container {
|
.password-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
|
@ -43,5 +43,5 @@ import { MessagePlugin } from "tdesign-vue-next";
|
||||||
import { ref } from "vue";
|
import { ref } from "vue";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="less" scoped>
|
||||||
</style>
|
</style>
|
|
@ -11,7 +11,7 @@ export default defineConfig({
|
||||||
server: {
|
server: {
|
||||||
proxy: {
|
proxy: {
|
||||||
"/api": {
|
"/api": {
|
||||||
target: "http://192.168.1.10:8000",
|
target: "http://192.168.1.10:8080",
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue
Block a user