🔨 Refactor: [前台]:登录,注册,重置密码加入表单校验

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 (
       <LoginLayout type={LOGIN_TYPE}>
         <div className={styles.main}>
+          <div className={styles.errorText}>{errorText}</div>
           <Input
             type="text"
             size="large"
             name="str"
             value={str}
-            onChange={this.valueChange}
+            onChange={this.setValue.bind(this)}
             addonBefore={<IconFont type="icon-mail" style={{ fontSize: "0.3rem" }} />}
             placeholder="邮箱或者用户名"
           />
           <Input.Password
             type="password"
             size="large"
-            name="password"
             value={password}
-            onChange={this.valueChange}
+            name="password"
+            onChange={this.setValue.bind(this)}
             addonBefore={<IconFont type="icon-password" style={{ fontSize: "0.3rem" }} />}
             placeholder="密码"
           />
           <div className={styles.action}>
-            <Checkbox checked={rememberMe} name="rememberMe" onChange={this.valueChange}>
+            <Checkbox checked={rememberMe} name="rememberMe" onChange={this.setValue.bind(this)}>
               记住我
             </Checkbox>
             <Link to="/public/resetPassword">忘记密码</Link>

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;

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 (
       <LoginLayout type={current}>
         <div className={styles.main}>
+          <div className={styles.errorText}>{errorText}</div>
           {current === REGISTER_TYPE ? (
             <Input
               type="text"

front/src/pages/public/RegisterOrReset/index.module.less

@@ -1,6 +1,7 @@
 .main {
   text-align: center;
   padding: 0.2rem;
+  padding-top: 0;
   width: 100%;
   border-radius: 5px;
 
@@ -10,6 +11,12 @@
     justify-content: space-between;
   }
 
+  .errorText {
+    color: red;
+    width: 100%;
+    height: 1.3em;
+  }
+
   .submit {
     margin-top: 0.1rem;
   }