Javascript 反应表单验证

我刚刚开始学习react，我正在做一个简单的表单应用程序。 我的问题是如何验证文本和电子邮件输入？ 我尝试了几种方法，但是代码变得非常混乱，所以我删除了代码w/“validation”

这是我的代码这是我的父“表单”组件

import React, { Component } from "react";

import Name from "components/Name";
import Email from "components/Email";
import Select from "components/Select";
import Bio from "components/Bio";

// Create Form Component
class Form extends Component {
    constructor(props) {
        super(props);

        this.state = {
            firstName: "",
            lastName: "",
            email: "",
            country: "Norway",
            bio: ""
        };
    }
    // Handle inputs value on change event
    handleChange = event => {
        this.setState({
            [event.target.id]: event.target.value
        });
    };

    // Handle the form submission
    handleSubmit = event => {
        event.preventDefault();
        // Send POST Request (every postbin expires aftre 30min)
        fetch("https://postb.in/1580328526126-6915104780346", {
            method: "POST",
            mode: "no-cors",
            headers: {
                "Content-Type": "application/json",
                "Access-Control-Allow-Origin": "*",
                "Access-Control-Allow-Headers": "*"
            },
            body: JSON.stringify(this.state)
        });
        console.log(this.state);
        // Clear form inputs
        this.setState({
            firstName: "",
            lastName: "",
            email: "",
            country: "",
            bio: ""
        });
    };
    // Render Form Component and its child components
    render() {
        // Destructuring the current component state
        const { firstName, lastName, email, country, bio } = this.state;
        return (
            <form onSubmit={this.handleSubmit}>
                <div className="shape rectangle"></div>
                <div className="shape triangle"></div>
                <div className="shape circle"></div>
                <Name
                    firstName={firstName}
                    lastName={lastName}
                    handleChange={this.handleChange}
                />
                <Email email={email} handleChange={this.handleChange} />
                <Select country={country} handleChange={this.handleChange} />
                <Bio bio={bio} handleChange={this.handleChange} />
                <button type="submit" className="btn">
                    Submit
                </button>
            </form>
        );
    }
}

export default Form;

import React，{Component}来自“React”；
从“组件/名称”导入名称；
从“组件/电子邮件”导入电子邮件；
从“组件/选择”导入选择；
从“组件/Bio”导入Bio；
//创建表单组件
类形式扩展组件{
建造师（道具）{
超级（道具）；
此.state={
名字：“，
姓氏：“，
电邮：“，
国家：“挪威”，
个人简历：“
};
}
//处理更改事件的输入值
handleChange=事件=>{
这是我的国家({
[event.target.id]：event.target.value
});
};
//处理表格提交
handleSubmit=事件=>{
event.preventDefault（）；
//发送POST请求（每个邮箱在30分钟后过期）
取回（“https://postb.in/1580328526126-6915104780346", {
方法：“张贴”，
模式：“无cors”，
标题：{
“内容类型”：“应用程序/json”，
“访问控制允许来源”：“*”，
“访问控制允许标头”：“*”
},
正文：JSON.stringify（this.state）
});
console.log（this.state）；
//清除表单输入
这是我的国家({
名字：“，
姓氏：“，
电邮：“，
国家：“，
个人简历：“
});
};
//渲染窗体组件及其子组件
render（）{
//分解当前组件状态
const{firstName，lastName，email，country，bio}=this.state；
返回(
提交
);
}
}
导出默认表单；

这是一个子组件，其余的子组件与此类似

import React, { Component } from "react";

// Create Name component for name && email inputs
class Name extends Component {
    // Render labels and name inputs
    render() {
        const { firstName, lastName, handleChange } = this.props;
        return (
            <div className="form-names">
                <label htmlFor="firstName">Name</label>
                <br />
                <input
                    type="text"
                    name="firstName"
                    value={firstName}
                    placeholder="First Name"
                    id="firstName"
                    onChange={handleChange}
                    required
                />
                <input
                    type="text"
                    name="lastName"
                    value={lastName}
                    placeholder="Last Name"
                    id="lastName"
                    onChange={handleChange}
                    required
                />
            </div>
        );
    }
}

export default Name;

import React，{Component}来自“React”；
//为名称和电子邮件输入创建名称组件（&E）
类名扩展组件{
//渲染标签和名称输入
render（）{
const{firstName，lastName，handleChange}=this.props；
返回(
名称


);
}
}
导出默认名称；

---

在react中，有几个库可用于执行表单验证。基本上，您只需要一个表单验证函数，它使用这些库支持的正则表达式比较和条件。上面的链接提供了与一些常用库的比较。

您将在fetch语句调用之前执行此操作……如果失败……您将不会调用这些函数，而是返回falseCheckout，而且我还看到上面的注释中提到了Formik！