反应-表单的验证

Question

TL; DR：React提供受控组件HOC，这是NPM中React验证库的基本思路。但是，弱点是与React Select等存在组件的集成以及错误消息的自定义显示位置

我正在从传统的编码jQuery和PHP迁移（多年来用于真实和大型项目，而不是学生学习代码）。我把大部分时间都集中在FORM上，因为客户的请求总是关于FORM。

现在使用FORM，最重要的部分是验证方法/插件。首先忘了一些人告诉我们“使用React你可以很容易地控制组件，所以我们不需要验证插件”。我们生产的FORM需要数百个具有多个标签的字段（例如人事表格或一些疯狂的组织报告），因此每个字段的编码不实用，就像传统的js编码来验证表单一样。

来图书馆，我测试并发现这三个可能已经足够了。

React-Validation
React Validation Mixin
Formsy

我不会详细介绍这些lib，但它们的工作方式类似。我们必须为输入，选择，textarea和表单创建一个组件以使它们工作。在Input输入组件中，我们定义输入边框更改类如何使边框错误变为红色以及如何错误消息显示（在输入中的div或span中）。

（还有其他验证库，但是他们的方法是对表单进行json验证，甚至用json创建表单，这不是我的选择，因为我想通过输入中的简单属性验证表单，例如{{ 1}}，不要浪费时间在大量的定义json）

现在我坚持使用这种技术：

1。与存在优秀组件整合

我从NPM下载优秀组件来解决某些特定功能（如React Select）。现在要真正的工作，我们必须验证这些自定义组件的输入。这需要额外的工作，我们必须将验证集成到任何发现的额外组件。我滔滔不绝地想知道如何使用HOC来验证React Select这样的（React-Validation代码）。为了使这项工作，我必须修改原始HOC以创建一个自定义HOC。

[required, email]

现在，我将来不能再考虑使用这种技术了。想象一下，我们有项目，需要一个额外的组件。我们没有太多时间编写自己的代码，因此请下载库。 BOOM *，我们想到了如何进行自定义组件验证。我们会浪费时间在“侧面项目”上，而不是主要任务（客户请求功能）。

2。自定义验证消息的位置

组件很好，但它也将代码包装在布局中。错误消息必须是输入组件的一部分。现在来了困难的部分，一些疯狂的客户端需要在表单顶部或模式框中放置错误消息。在这种情况下，如果在组件中使用包装输入和错误，我仍然无法想出解决方案。

第3。我的肮脏解决方案

jQuery出现的时间足够长，jQuery lib变得成熟。使用jquery进行验证可以通过所谓的jQuery Validation来解决。任何我们考虑过valition的情况都可以通过这个lib轻松优雅地解决（自定义错误放置，自定义字段，自定义验证器，自定义错误格式（不仅仅是css）...）

我只是在// Define own Input component function MySelect({ error, isChanged, isUsed, ...selectProps }) { return( <div> <Select onChange={selectProps.onChange.bind(this)} {...selectProps} {...( isChanged && isUsed && error ? { className: `is-invalid-input ${selectProps.className}` } : { className: selectProps.className } )} /> <input type="hidden" {...selectProps} /> {isChanged && isUsed && error} </div> ) } const MyValidationSelect = controlSelect(MySelect); //My custom HOC中使用React表单进行jQuery验证，它可以正常工作。通过使用ComponentDidMount，errorPlacement，highlight函数API写入“验证配置文件”，集成任何自定义反应组件的验证也很简单。

感谢所有人都达到这条线，这真是一个很长的话题。 这是我的问题：我试图“思考反应”，但无法解决最简单的事情：反应表单验证。

感谢您提出解决此问题的任何提示。

Answer 1

我遇到了同样的问题因此我自己写了一些小包：

https://www.npmjs.com/package/validate-react

这需要简单的验证，无需使用redux或重命名的标签。

Answer 2

使用react-forms-validator反应的流畅表单验证

反应-表单的验证

为React组件提供简单表单验证的组件。

如果您发现任何错误或错误，请随时提出问题。也欢迎拉动请求。

安装

npm i -S react-forms-validator

使用示例

首先导入模块。

那就是它。我们现在可以在我们的React组件中使用它：

从＆＃39; react-forms-validator＆＃39;;
导入验证器

import React, { Component } from 'react';
import Validator from 'react-forms-validator';

class Login extends React.Component{

    constructor( props ){
        super( props );
        this.state = {
            contact_no:"",
            password:"",
            submitted:false,
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleFormSubmit = this.handleFormSubmit.bind(this);
        this.isValidationError = this.isValidationError.bind(this);
        this.flag= true;
        this.isFormValidationErrors = false;
    }


    handleChange(event){
        let { name, value } = event.target;
        this.setState( { [name]:value } );
        let { submitted } = this.state;
    }
    isValidationError(flag){
        this.isFormValidationErrors = flag;
    }

    handleFormSubmit(event){
        event.preventDefault();
        this.setState( { submitted:true } );
        let { contact_no, password } = this.state;
        if ( !this.isFormValidationErrors ){
            //you are ready to dispatch submit action here.
        }
    }

    render() {
        let { contact_no, password, submitted } = this.state;
        return(
            <div>
                <form noValidate onSubmit={this.handleFormSubmit}>
                    <div className="formgroup">
                        <Input 
                            type="text" name="email" 
                            placeholder="Contact number" 
                            value={ contact_no } 
                            onChange={ this.handleChange }/>
                            <Validator 
                                isValidationError={this.isValidationError}
                                isFormSubmitted={submitted} 
                                reference={contact_no}
                                validationRules={{required:true,number:true,maxLength:10}} 
                                validationMessages={{required:"This field is required",number:"Not a valid number",maxLength:"Not a valid number"}}/>
                    </div>
                    <div className="formgroup">
                        <Input 
                            type="password" 
                            name="password" 
                            placeholder="Password" 
                            value={ password } 
                            onChange={ this.handleChange } 
                            autoComplete/>
                            <Validator 
                                isFormSubmitted={submitted} 
                                reference={password} 
                                validationRules={{required:true}} 
                                validationMessages={{required:"This field is required",}}/>

                    </div>
                    <div>
                        <button type="submit">Sign In</button>
                    </div>
                </form>
            </div>  
        )
    }
}

组件和道具

react-forms-validator提供Validator个组件。还提供五（5）个必需的道具。现在所有的道具都是必需的。

isValidationError功能。

isFormSubmitted boolean [true | false]。

reference引用输入值。上面示例中的状态值如contact_no和password。

validationRules对象。查看下面的可用规则。

validationMessages对象。

注意:: validationRules对象的密钥和validationMessages应该是相同且必需的。

Answer 3

我已经建立了一个自定义的Hook，可以轻松进行表单验证，也许您会发现它有用。

Github：https://github.com/bluebill1049/react-hook-form 网站：https://react-hook-form.now.sh

下面的快速代码示例

import React from 'react'
import useForm from 'react-hook-form'

function App() {
  const { register, handleSubmit, errors } = useForm() // initialise the hook
  const onSubmit = (data) => { console.log(data) } // callback when validation pass

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="firstname" ref={register} /> {/* register an input */}

      <input name="lastname" ref={register({ required: true })} /> {/* apply required validation */}
      {errors.lastname && 'Last name is required.'} {/* error message */}

      <input name="age" ref={register({ pattern: /\d+/ })} /> {/* apply a Refex validation */}
      {errors.age && 'Please enter number for age.'} {/* error message */}

      <input type="submit" />
    </form>
  )
}

Answer 4

在功能组件中为。 Library for Functional component 在班级情况下。 Library for Class component。

单击两者的href并获取它。如果有帮助，那就投票吧！

反应和验证库

4 个答案:

反应-表单的验证

安装

使用示例

组件和道具