我已经构建了一个自定义 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>
  )
}

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

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

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

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

react形式验证器

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

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

安装

npm i -S react-forms-validator

示例用法

首先导入module。

而已。我们现在可以在我们的 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>  
        )
    }
}

组件和props

react-forms-validator提供一个Validator组件。还提供五 (5) 个必需的props。现在所有的props都是必需的。

isValidationError 功能。

isFormSubmitted 布尔值 [真|假]。

reference参考输入值。状态值一样contact_no，并password在上面的例子。

validationRules目的。查一下下面的可用规则。

validationMessages 目的。

注意：validationRules对象的键和validationMessages应该是相同的并且是必需的。

在功能组件的情况下。功能组件库 在类组件案例中。类组件的库。

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