reactjs React Bootstrap模式验证不起作用

rn0zuynd 于 2023-08-04 发布在 React

关注(0)|答案(2)|浏览(94)

尝试使用字段配置在React-bootstrap表单上进行输入验证

const TextInput = (props) => {
    const [text, setText] = useState('');
    const {
        type,
        colProps,
        register,
        errors,
        fieldInfo,
        ...restProps
    } = props;
    const { label, name, value, validation } = fieldInfo || {};
    
    const validatePattern = (input) =>{
        const regex = new RegExp(validation?.pattern?.value);
        
        return regex.test(input)
    }
    
    return (
    <Form.Group as={Col} {...colProps} >
        {label}
        <Form.Control
            type ={type}
            name={name}
            value={value}
            defaultValue = {fieldInfo?.defaultValue ?fieldInfo?.defaultValue:''}
            {...restProps}
            {...register(name, {
            ...validation
            })}
            isValid={validatePattern(value)} 
        /* tried doing this with onChange to track input but onChange doesnt fire... and value is always undefined */
        />
    </Form.Group>
    );
};
    
export default TextInput;

字符串
然后使用json configuration定义fieldInfo：

{
    "type": "TEXT_INPUT",
    "colProps": { "sm":"auto" },
    "fieldInfo": {
        "label": "Case Number",
        "name": "caseNumber",
        "validation" :{
            "pattern": {
                "value": "^[0-9]{8,12}$",
                "message": "Input is Numeric, larger than 8, less than 13"
            },
            "required": {
                "value": true,
                "message": "Case number is required"
            },
            "maxLength": {
                "value": 12,
                "message": "Case number should be less than 13 chars."
            }
        }
    }
}

型
required和maxLength验证有效，但模式不会触发错误。我可以调试并看到他们带来的信息浏览器-只是一个什么也不做。
如上所述，validatePattern只看到未定义的输入，即使我尝试useState并捕获输入的值。

-在注册函数中添加了缺少的逗号。

reactjs

来源：https://stackoverflow.com/questions/76790605/react-bootstrap-pattern-validation-not-working

2条答案

按热度按时间

zd287kbt1#

你漏掉了一个逗号，不需要这个spreed

//thisone 
{...register(name {
            ...validation
            })}

//should be 
{...register(name,validation)}

字符串
由于register函数需要一个字符串和一个对象进行验证，
所以从技术上讲，验证应该是这样的

<Form.Control
            type ={type}
            name={name}
            value={value}
            defaultValue = {fieldInfo?.defaultValue ?fieldInfo?.defaultValue:''}
            {...restProps}
            {...register(name, {
              pattern: {
                value: "^[0-9]{8,12}$",
                message: "Input is Numeric, larger than 8, less than 13"
            },
              required: {
                value: true,
                message: "Case number is required"
            },
              maxLength: {
                value: 12,
                message: "Case number should be less than 13 chars."
            }
            })}
            isValid={validatePattern(value)} 
        />

型

赞(0）回复(0）举报 2023-08-04

jgwigjjp2#

在发布了这个之后，我想我可以将validate函数和onChange函数传递到register中。因此，为了工作，我更新了render中的register函数，并使用useState钩子处理输入。

const Input = (props) => {
    const[text, setText] = useState('');
    const {
        type,
        colProps,
        register,
        errors,
        fieldInfo,
        ...restProps
    } = props;
    const { label, name, value, validation } = fieldInfo || {};
    
    const validatePattern = () =>{
        if (validation?.pattern?.value && text){
            const isValid = new RegExp(validation?.pattern?.value).test(text);
            return isValid? null: validation?.pattern?.message;
        }
    }
    const handleInput = (e) =>{
        e.preventDefault();
        setText(e.target.value);
    }
    return (
    <Form.Group as={Col} {...colProps} >
        {label}
        <Form.Control
            type ={type}
            name={name}
            value={value}
            defaultValue = {fieldInfo?.defaultValue ?fieldInfo?.defaultValue:''}
            {...restProps}
            {...register(name, {
            ...validation,
            onChange: handleInput,
            validate: validatePattern
            })}
            key={input+name}
        />
    </Form.Group>
    );
};
    
export default Input;

字符串
然后，我可以不去管json配置，让团队使用它来设置正则表达式。其他验证也继续工作。

赞(0）回复(0）举报 2023-08-04

我来回答

reactjs React Bootstrap模式验证不起作用

2条答案

相关问题

热门标签

最新问答