输入验证错误答案

【问题标题】：Wrong input validation输入验证错误
【发布时间】：2022-01-23 17:32:18
【问题描述】：

我想验证我在react 中的所有输入我的验证代码如下所示：

let isValid = {
    name: false,
    address: false,
    postcode: false,
    phone: false,
    email: false
};

const validateInput = (e) => {
    let currentInput = e.target

    if (currentInput.name === 'name') {
        if (currentInput.value !== 'undefined' && currentInput.value.match(/^[a-zA-Z]+$/)) {
            isValid.name = true;
        } else {
            isValid.name = false;
        }
    }

    if (currentInput.name === 'address') {
        if (currentInput.value !== 'undefined') {
            isValid.address = true;
        } else {
            isValid.address = false;
        }
    }

    if (currentInput.name === 'postcode') {
        if (currentInput.value !== undefined && currentInput.value.match(/^[0-9]+[-]+[0-9]+$/) && currentInput.value.length > 4) {
            isValid.postcode = true;
        } else {
            isValid.postcode = false;
        }
    }

    if (currentInput.name === 'phone') {
        if (currentInput.value !== 'undefined' && currentInput.value.match(/^[0-9]+$/) && currentInput.value.length > 7) {
            isValid.phone = true;
        } else {
            isValid.phone = false;
        }
    }

    if (currentInput.name === 'email') {
        if (currentInput.value !== 'undefined' && currentInput.value.match(/^(([^<>()[\]\\.,;:\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,}))$/)) {
            isValid.email = true;
        } else {
            isValid.email = false;
        }
    }

    console.log(isValid)
}

例如，当我在“名称”中键入正确的值时，isValid.name 的值为真，然后当我在“地址”中写一些想法时，isValid.address 为真，但 isValid.name 为假如何解决？

{requiredInformations.map((el) => (
        <>
            <Label>{el.label}</Label>
            <Input type={el.type} name={el.name} required onChange={(e) => { getInputValue(e); validateInput(e) }} />
        </>
    ))}

【问题讨论】：

为什么不使用 react 进行验证？为什么要使用 DOM 来查找元素？
我是 react 新手，如何才能更好地做到这一点？

标签： javascript reactjs forms

【解决方案1】：

我建议你尝试使用react-joi库进行验证React-Joi-Validation 它易于使用，您只需阅读他们的 npm 包主页上的第一页，就可以在代码中实现您在此处尝试的内容。

【讨论】：

【解决方案2】：

您需要熟悉“状态”等术语、“props”、“组件生命周期”等。使用 youtube 上的指南构建一个简单的组件，你可以找到很多。

同时，这是一个验证输入的简单组件：

function App() {
  const [name, setName] = React.useState('');
  const [address, setAddress] = React.useState('');

  const isValid = React.useMemo(() => {
    const result = {
      name: false,
      address: false,
    };

    if (name.match(/^[a-zA-Z]+$/)) {
      result.name = true;
    } else {
      result.name = false;
    }

    if (address !== '') {
      result.address = true;
    } else {
      result.address = false;
    }

    return result;
  }, [name, address]);

  return (
    <div>
      <input
        placeholder="Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />

      {isValid.name ? <p>Name is valid</p> : <p>Name is invalid</p>}

      <br />

      <input
        placeholder="Address"
        value={address}
        onChange={(e) => setAddress(e.target.value)}
      />

      {isValid.address ? <p>Adress is valid</p> : <p>Adress is invalid</p>}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>


<div id="root">
</div>

【讨论】：