React Suite 组件表单验证输入

React Suite 是一个为 ReactJS 提供了美观且可定制的组件集合，使得构建用户界面更加简单。其中一个重要的组件是 Input，它处理表单验证和用户输入，能够显示有用的错误消息。这使得它非常适合创建强大且用户友好的 Web 应用。

表单验证输入

React Suite 中的 Input 组件是一个灵活的表单输入组件，可以用作普通的文本输入或者多行文本输入。你可以使用占位符、大小和验证等属性轻松自定义它。还可以触发动作并显示工具提示。这是一种在 React 应用中处理用户输入的用户友好方式。

语法

import { Input } from 'rsuite';
const InputForm = () => (
  <>
    <Input placeholder="Input" />
  </>
);

创建应用程序并安装所需的模块的步骤

步骤1： 使用以下命令创建React应用程序：

npx create-react-app foldername

步骤2: 在创建项目文件夹，即文件夹名称，后，使用以下命令进入该文件夹:

cd foldername

步骤3： 创建ReactJS应用程序后，使用以下命令安装所需模块：

npm install rsuite

步骤4： 导入所需样式在 App.js 文件中在 src 文件夹中。

import "rsuite/dist/rsuite.min.css";

步骤5： 定义所需的验证架构和状态

步骤6： 编写您的应用程序所需的代码

步骤7： 运行应用程序

npm start

注意： 您的应用程序现在正在运行在 http://localhost:3000/

示例1： 简单的提交表单默认输入验证

import { Form, Button, Schema } from "rsuite"; 
import "rsuite/dist/rsuite.min.css"; 
  
function App() { 
    const nameRule =  
        Schema.Types.StringType().isRequired( 
            "This field is required."
    ); 
  
    const emailRule = Schema.Types.StringType().isEmail( 
        "Please enter a valid email address."
    ); 
  
    return ( 
        <Form> 
            <Form.Group controlId="name"> 
                <Form.ControlLabel> 
                    Username 
                </Form.ControlLabel> 
                <Form.Control name="name" rule={nameRule} /> 
            </Form.Group> 
            <Form.Group controlId="email"> 
                <Form.ControlLabel>Email</Form.ControlLabel> 
                <Form.Control 
                    name="email"
                    rule={emailRule} 
                /> 
            </Form.Group> 
            <Button appearance="primary" type="submit"> 
                Submit 
            </Button> 
        </Form> 
    ); 
} 
  
export default App;

输出: 以上示例展示了一个简单的提交表单，其中包括两个输入字段：用户名和电子邮件。在这个示例中，我们使用了React Suite的组件：Form、Button和Form.Control，并使用自定义验证规则（nameRule和emailRule），使用Schema.Types.StringType()。

React Suite 组件表单验证输入

示例2: 自定义验证的简单登录表单输入

import React, { useState } from "react"; 
import { 
    Form, 
    Button, 
    ButtonToolbar, 
    Schema, 
    InputGroup, 
} from "rsuite"; 
import EyeIcon from "@rsuite/icons/legacy/Eye"; 
import EyeSlashIcon from "@rsuite/icons/legacy/EyeSlash"; 
  
import "rsuite/dist/rsuite.min.css"; 
import "./App.css"; 
  
function App() { 
    const { StringType } = Schema.Types; 
    const model = Schema.Model({ 
        password: StringType().isRequired( 
            "This field is required."
        ), 
        email: StringType() 
            .isEmail("Please enter a valid email address.") 
            .isRequired("This field is required."), 
    }); 
    const [visible, setVisible] = useState(false); 
    const handleChange = () => { 
        setVisible(!visible); 
    }; 
    return ( 
        <> 
            <Form model={model}> 
                <Form.Group controlId="email"> 
                    <Form.ControlLabel> 
                        Email 
                    </Form.ControlLabel> 
                    <Form.Control 
                        name="email"
                        type="email"
                    /> 
                </Form.Group> 
                <Form.Group controlId="password"> 
                    <Form.ControlLabel> 
                        Password 
                    </Form.ControlLabel> 
                    <InputGroup> 
                        <Form.Control 
                            name="password"
                            type={ 
                                visible === false
                                    ? "password"
                                    : "text"
                            } 
                        /> 
                        <InputGroup.Addon 
                            onClick={handleChange} 
                        > 
                            {visible ? ( 
                                <EyeIcon /> 
                            ) : ( 
                                <EyeSlashIcon /> 
                            )} 
                        </InputGroup.Addon> 
                    </InputGroup> 
                </Form.Group> 
                <ButtonToolbar> 
                    <Button 
                        appearance="primary"
                        type="submit"
                    > 
                        Login 
                    </Button> 
                </ButtonToolbar> 
            </Form> 
        </> 
    ); 
} 
  
export default App;

输出： 这个示例演示了一个带有电子邮件和密码输入字段的登录表单。密码输入字段还包括一个切换按钮，用于显示/隐藏密码，使用可见状态。自定义验证规则是使用Schema.Types.StringType()定义的。输出

React Suite 组件表单验证输入