问题描述
嘿,我对反应很陌生,我必须使用“onChange”进行表单验证,如果有效,则只有状态应该更改。如何以正确的方式做到这一点? const [status,setStatus] = useState(false)
const handleChange = (e) => {
let isFieldValid = false;
if (e.target.name === "user_email") {
isFieldValid = /\d{1}/.test(e.target.value);
}
if (e.target.name === "user_name") {
isFieldValid =(e.target.value !== null) && ( e.target.value.trim() !== '');
}
if(e.target.name === 'message'){
isFieldValid = e.target.value !== null) && ( e.target.value.trim() !== '');
}
if(isFieldValid){
setStatus(true);
}else{
setStatus(false);
}
};
解决方法
您好,您可以手动验证所有输入字段,但需要大量工作和代码管理,因此您可以使用以下 NPM 库代替手动编写验证表单的逻辑,这将有很大帮助
react-validation(此库遵循您当前使用的确切方法)
,请试试这个。
const handleChange = (e) => {
let isFieldValid = false;
const {name,value} = e.target;
if (name === "user_email") {
isFieldValid = /\d{1}/.test(value);
}
if (name === "user_name" || name === 'message') {
isFieldValid = value && (value.trim() !== '');
}
setStatus(isFieldValid);
};
你的代码是正确的,但我只是像这样重构了它。 有用吗?
您也可以使用验证节点模块。
示例:
var validator = require('validator');
validator.isEmail('foo@bar.com'); //=> true