通过Laravel规则进行JavaScript验证

我目前正在使用该库来验证前端(here)上的表单输入,该输入是通过对象发送给我的。我将它们存储在我的状态中,并使用规则状态值来检查是否与正在发送的数据相对应。我正在尝试使用它来检查要发送的数组是否有效,但是当控制台记录验证器对象时,即使我的数组为空,也没有显示errorCount,似乎是0。 / p>

通过Laravel规则进行JavaScript验证

这是我要实现的目标:

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参数。

任何帮助表示赞赏。

tanghui22222 回答:通过Laravel规则进行JavaScript验证

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3164026.html

大家都在问