diff --git a/front/src/pages/public/Login/index.jsx b/front/src/pages/public/Login/index.jsx index 62250f5..8a7b244 100644 --- a/front/src/pages/public/Login/index.jsx +++ b/front/src/pages/public/Login/index.jsx @@ -25,20 +25,51 @@ class Login extends Component { this.state = { str: "", password: "", - rememberMe: false + rememberMe: false, + errorText: "" }; this.query = queryString.parse(window.location.search); } - valueChange = e => { + checkStr(value) { + if (value.length === 0) { + this.setState({ errorText: "用户名或邮箱为空" }); + return false; + } else { + this.setState({ errorText: "" }); + return true; + } + } + + checkPassword(value) { + if (/^(?=.*?\d+.*?)(?=.*?[a-zA-Z]+.*?)[\da-zA-Z]{6,20}$/.test(value)) { + this.setState({ errorText: "" }); + return true; + } else { + this.setState({ errorText: "密码为6-20位数字密码组合" }); + return false; + } + } + + setValue(e) { if (e.target.name === "rememberMe") { this.setState({ rememberMe: e.target.checked }); } else { - this.setState({ [e.target.name]: e.target.value }); + const value = e.target.value.trim(); + if (e.target.name === "str") { + this.checkStr(value); + } else { + this.checkPassword(value); + } + this.setState({ [e.target.name]: value }); } - }; + } submit = () => { + const { str, password } = this.state; + if (!(this.checkStr(str) && this.checkPassword(password))) { + return; + } axios .post("/user/login", this.state) .then(res => { @@ -59,30 +90,31 @@ class Login extends Component { }; render() { - const { str, password, rememberMe } = this.state; + const { str, password, rememberMe, errorText } = this.state; return (
+
{errorText}
} placeholder="邮箱或者用户名" /> } placeholder="密码" />
- + 记住我 忘记密码 diff --git a/front/src/pages/public/Login/index.module.less b/front/src/pages/public/Login/index.module.less index 5c4a558..cbd4778 100644 --- a/front/src/pages/public/Login/index.module.less +++ b/front/src/pages/public/Login/index.module.less @@ -4,6 +4,12 @@ width: 100%; border-radius: 5px; + .errorText { + color: red; + width: 100%; + height: 1.3em; + } + .action { padding: 0.1rem 0; display: flex; diff --git a/front/src/pages/public/RegisterOrReset/index.jsx b/front/src/pages/public/RegisterOrReset/index.jsx index d51ebca..8474b70 100644 --- a/front/src/pages/public/RegisterOrReset/index.jsx +++ b/front/src/pages/public/RegisterOrReset/index.jsx @@ -5,6 +5,25 @@ import { LoginLayout, REGISTER_TYPE, RESET_PASSWORD_TYPE } from "../../../layout import styles from "./index.module.less"; import axios from "../../../util/httpUtil"; +const pattern = { + username: { + pattern: /^[\da-zA-Z]{1,10}$/, + text: "用户名为1-10位的数字或者字母的组合" + }, + email: { + pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, + text: "请输入合法的邮箱" + }, + password: { + pattern: /^(?=.*?\d+.*?)(?=.*?[a-zA-Z]+.*?)[\da-zA-Z]{6,20}$/, + text: "密码为6-20位数字字母组合" + }, + authCode: { + pattern: /^[\d]{6,6}$/, + text: "验证码为6位数字" + } +}; + export default class Register extends React.Component { constructor(props) { super(props); @@ -18,7 +37,8 @@ export default class Register extends React.Component { repassword: "", authCode: "", authCodeText: "获取验证码", - isCountDown: false + isCountDown: false, + errorText: "" }; } @@ -37,34 +57,70 @@ export default class Register extends React.Component { } let count = 60; this.setState({ authCodeText: `${count}s后重试`, isCountDown: true }); + this.timer = setInterval(() => { + count--; + if (count === 0) { + this.setState({ isCountDown: false, authCodeText: "获取验证码" }); + clearInterval(this.timer); + return; + } + this.setState({ authCodeText: `${count}s后重试` }); + }, 1000); axios.get("/user/authCode?email=" + this.state.email).then(() => { message.success("发送成功,请注意查收(检查垃圾箱)"); - this.timer = setInterval(() => { - count--; - if (count === 0) { - this.setState({ isCountDown: false, authCodeText: "获取验证码" }); - clearInterval(this.timer); - return; - } - this.setState({ authCodeText: `${count}s后重试` }); - }, 1000); }); }; changeData = e => { - this.setState({ [e.target.name]: e.target.value }); + const name = e.target.name; + const value = e.target.value.trim(); + this.setState({ [name]: value }); + this.checkParam(name, value); }; + /** + * 字段校验 + * @param {*} key key + * @param {*} value 值 + */ + checkParam(key, value) { + const { password } = this.state; + if (key === "repassword") { + if (password !== value) { + this.setState({ errorText: "两次密码不一致" }); + return false; + } else { + this.setState({ errorText: "" }); + return true; + } + } + const rule = pattern[key]; + if (rule.pattern.test(value)) { + this.setState({ errorText: "" }); + return true; + } else { + this.setState({ errorText: rule.text }); + return false; + } + } + /** * 提交表单 */ submit = () => { const { current, username, email, password, repassword, authCode } = this.state; - if (password !== repassword) { - message.error("两次密码不一致"); + let form = { username, email, password, authCode }; + if (current === REGISTER_TYPE && !this.checkParam("username", username)) { + return; + } + const isOk = + this.checkParam("email", email) && + this.checkParam("password", password) && + this.checkParam("repassword", repassword) && + this.checkParam("authCode", authCode); + if (!isOk) { return; } - let form = { username, email, password, authCode }; if (current === REGISTER_TYPE) { axios .put("/user", form) @@ -87,10 +143,11 @@ export default class Register extends React.Component { }; render() { - const { current, username, email, password, repassword, authCode, authCodeText, isCountDown } = this.state; + const { current, username, email, password, repassword, authCode, authCodeText, isCountDown, errorText } = this.state; return (
+
{errorText}
{current === REGISTER_TYPE ? (