我目前正在使用该库来验证前端(here)上的表单输入,该输入是通过对象发送给我的。我将它们存储在我的状态中,并使用规则状态值来检查是否与正在发送的数据相对应。我正在尝试使用它来检查要发送的数组是否有效,但是当控制台记录验证器对象时,即使我的数组为空,也没有显示errorCount
,似乎是0。 / p>
这是我要实现的目标:
import React,{ useState,useEffect } from 'react';
import Validator from 'validatorjs';
import FormScene from 'ms/scenes/FormScene';
import Base from 'ms/scenes/Base';
import CheckBox from 'ms/components/Form/CheckBox';
import Notification from 'ms/components/Notification';
import { post } from 'ms/services/api';
import { connect } from 'react-redux';
import styles from './styles.scss';
const Requirements = props => {
const [options,setOptions] = useState(null);
const [rules,setRules] = useState(null);
const [id,setId] = useState(null)
const [closeNotification,setCloseNotification] = useState(1);
const [loader,setLoader] = useState(1);
const [data,setData] = useState([]);
const requirements = {
'requirements.selection': data,}
useEffect(() => {
if (props.state.rules !== null && props.state.rules !== undefined) {
setOptions(props.state.rules.rules.deal);
setTimeout(() => {
setLoader(0)
},1000)
}
if (options !== null && options !== undefined) {
setRules({'requirements.selection': options.workflow.rules['requirements.selection']})
}
if (props.state.id.id !== null && props.state.id.id !== undefined) {
setId(props.state.id.id);
}
},[props.state,options])
const closeNotificationHandler = () => {
setCloseNotification(0);
}
const onChange = (e) => {
let currentData = data;
if (e.target.checked) {
setData([...currentData,e.target.name]);
} else {
const index = currentData.indexOf(e.target.name);
if (index > -1) {
currentData.splice(index,1);
setData([...currentData]);
}
}
}
const submit = (e) => {
e.preventDefault();
let validation = new Validator(requirements,rules);
console.log(validation);
if (validation === true) {
post(`deal/${id}/workflow/requirements`,{},{requirements: requirements})
.then(res => {
})
.catch(err => {
})
} else {
console.log('validation failed')
}
}
console.log(rules);
// console.log(requirements);
return (
<Base>
{closeNotification === 1 ?
<Notification
message="Dropbox folders created."
notificationStatus={1}
closeNotification={closeNotificationHandler}
/>
: null}
{loader === 1 ? <p>Loading...</p> :
options.workflow.form.map(item => (
<FormScene key={item.name} title={item.value} onSubmit={submit}>
{item.components.map(item => (item.options.map(option =>
<CheckBox
key={option.name}
id={option.name}
name={item.field}
label={option.value}
val={option.value}
onChange={e => onChange(e)}
/>
)))}
</FormScene>
))
}
</Base>
)
}
const mapstatetoProps = (state) => {
return {
state
}
}
export default connect(mapstatetoProps)(Requirements);
在图像中,input
键对应于验证器参数中的requirements
,而rules
对应于rules
参数。
任何帮助表示赞赏。