反应和验证库

Question

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

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

现在有了 FORM，最重要的部分是验证方法/插件。首先忘记一些人告诉我们的“使用 React 你可以轻松地做受控组件，所以我们不需要验证插件”。我们在生产中的FORM需要上百个Field和很多Tab（比如一个人事表或者一些疯狂的组织报告），所以每个字段编码是不切实际的，它就像传统的js编码来验证表单。

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

1. React-Validation
2. React Validation Mixin
3. Formsy

我不会详细介绍这些库，但它们的工作方式是相似的。我们必须为 input、select、textarea 和 form 创建一个组件才能使它们工作。在 Input 组件内部，我们定义了 Input 边框如何更改类以使边框错误变为红色以及错误消息如何出现（在 Input 下面的 div 或 span 中）。

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

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

1.与现有优秀组件集成

我从 NPM 下载了优秀的组件来解决一些特定的功能（比如React Select）。现在到了真正的工作，我们必须验证这些自定义组件的输入。这是一项额外的工作，我们必须将验证集成到找到的任何额外组件中。我拼命想用 HOC 来验证 React Select 像这样（React-Validation 代码）。为了使这项工作正常进行，我必须修改 origin HOC 以创建自定义 HOC。

  // 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

现在，我想不出更多关于未来使用这种技术的想法。想象一下，我们有一个项目并且需要一个额外的组件。我们没有太多时间编写自己的代码，所以下载一个库。 BOOM*，我们拼命想办法让自定义组件生效。我们会将时间浪费在“副项目”上，而不是主要任务（客户请求功能）上。

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

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

3.我的肮脏解决方案

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

我只是在ComponentDidMount 中使用 React 表单进行 jQuery 验证，它可以正常工作。通过使用errorPlacement、highlight、success 函数 API 写入“验证配置文件”，也可以轻松集成任何自定义反应组件的验证。

---

感谢任何人到达此行，这真的是一个很长的话题。 这是我的问题：我试图“在反应中思考”，但无法解决最简单的问题：反应表单验证。

感谢任何提示我解决此问题。

Answer 1

在功能组件情况下。 Library for Functional component 在类组件案例中。 Library for Class component.

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

Answer 2

我已经为简单的表单验证构建了一个自定义 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 3

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

react-forms-validator

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

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

安装

npm i -S react-forms-validator

示例用法

首先导入模块。

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

从'react-forms-validator'导入验证器；

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 布尔值 [true|false]。

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

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

validationMessages 对象。

注意:: validationRules 对象和validationMessages 的键必须相同且必须。

Answer 4

我遇到了同样的问题，所以我自己写了一个小包：

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

这会处理简单的验证，而不需要任何 redux 或重命名的标签。