如何验证表单的用户名和密码？

问题描述

我创建了一个包含两个字段的用户名和密码的表单，两个都是用户名长度为3且密码长度为6的表单。有人可以帮助我进行验证。例如，如果用户输入的用户名长度小于3它应该显示一条消息，如果somone显示的密码小于或大于6，则应该显示一条消息

import withRoot from './modules/withRoot';
// --- Post bootstrap -----
import React,{ useState } from 'react';
import history from './history';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Link from '@material-ui/core/Link';
import { FormGroup,FormControl,ControlLabel } from "react-bootstrap";
import { Field } from 'react-final-form';
import Typography from './modules/components/Typography';
import AppFooter from './modules/views/AppFooter';
import AppAppBar from './modules/views/AppAppBar';
import Axios from 'axios';
import AppForm from './modules/views/AppForm';
import Button from '@material-ui/core/Button';
import { Alert } from 'react-bootstrap';
import { email,required } from './modules/form/validation';
import rftextField from './modules/form/rftextField';
import FormButton from './modules/form/FormButton';
import FormFeedback from './modules/form/FormFeedback';
import TextField from '@material-ui/core/TextField';
import Home from './Home';
import Dashb from './Dashb';



const useStyles = makeStyles((theme) => ({
  form: {
    marginTop: theme.spacing(6),},button: {
    marginTop: theme.spacing(3),marginBottom: theme.spacing(2),Feedback: {
    marginTop: theme.spacing(2),}));

export default function SignIn() {
  const [username,setUsername] = useState("");
  const [password,setPassword] = useState("");
  const [status,setStatus] = useState(true);
  const classes = useStyles();
  let demo;
  function validateForm() {
    return username.length > 0 && password.length > 0;
  }

  function setIncorrect() {
    setStatus(false);
  }



  function setCorrect() {
    setStatus(true);
  }


 


  async function handleSubmit(event) {
    event.preventDefault()
  
    let user = await Axios.get(
      'http://localhost:9000/admin-service/admin/check/' +
        username +
        '/' +
        password
    )
      .then(response => {
        demo = response.data
        if (demo == true) {
          history.push('/admin');
          console.log('####')
          
        } else{
          console.log('not true')
          Functions();
      }
      })
      .catch(error => {
        console.log(error.response.data)
        setIncorrect()
      })
  }

  function Functions() {
    alert("PLEASE ENTER CORRECT CREDENTIALS!!!!!!!!!!")
}

  return (
    <React.Fragment>
      <AppAppBar />
      <AppForm>
        <React.Fragment>
          <Typography variant="h3" gutterBottom marked="center" align="center">
            Admin Sign In
          </Typography>
        </React.Fragment>

        <form onSubmit={handleSubmit} className={classes.form} novalidate>
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            id="username"
            label="Username"
            name="username"
            autoFocus
            onChange={e => { setUsername(e.target.value); setCorrect() }}
          />
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            name="password"
            label="Password"
            type="password"
            id="password"
            autoComplete="current-password"
            onChange={e => { setPassword(e.target.value); setCorrect() }}
          />
          {(!status) && <Alert severity="error">Incorrect credentials. Please try again</Alert>}

          <FormButton
            type="submit"
            className={classes.button}
            disabled={!validateForm()}
            size="large"
            color="secondary"
            fullWidth
          >
            Sign In
              </FormButton>
        </form>
        


        <Typography align="center">
          <Link underline="always" href="/premium-themes/onepirate/forgot-password/">
            Forgot password?
          </Link>
        </Typography>
      </AppForm>
      

    </React.Fragment>


  );
}

解决方法

1. 创建两个新状态：usernameIsValid和passwordIsValid，并将初始状态设置为“ true”

2. 在调用handleSubmit（）时，在调用api之前创建如下条件：

   if (username.length !== 3) setUsernameIsValid(false)

   if (password.length !== 3) setPasswordIsValid(false)

3. 如果条件失败，请不要进行api调用。

4. 在TextFields下创建一个div来包含如下错误：

   {!userNameIsValid && <div>Please enter a valid username</div>}