React中使用表单验证

简介

在React中对表单验证，需要借助 rc-form 这个库，它是 react 高阶 form 组件

使用

代码如下

import React from 'react'
import "../assets/css/modifyPassword.less"                                          
import {
    
     createForm  } from 'rc-form';
import {
    
     Input, Cell,Button,Toast } from 'zarm';//本代码实例使用了zarm组件库中的组件
function ModifyPassword(props) {
    
    
    const {
    
     getFieldProps, getFieldError } = props.form;
    const navigate=useNavigate();
    const confirm=async ()=>{
    
    
        //字段验证
        props.form.validateFields(async (error,value)=>{
    
    
            if(!error){
    
    
                if (value.newPass !=value.confirmPass) {
    
    
                    Toast.show('新密码输入不一致');
                    return
                  }
                   Toast.show("修改成功")                                                                                                                                                                  
            }else{
    
    
              Toast.show("请填写完整信息")
            }
        })
        
    }
  return (
    <div className='modifyPassword'>        
    <div className="content">
    <Cell title="原密码">
        <Input
          clearable
          type="password"
          placeholder="请输入原密码"
          {
    
    ...getFieldProps('oldPass', {
    
     rules: [{
    
     required: true }] })}
        />
      </Cell>
      <Cell title="新密码">
        <Input
          clearable
          type="password"
          placeholder="请输入新密码"
          {
    
    ...getFieldProps('newPass', {
    
     rules: [{
    
     required: true }] })}

        />
      </Cell>
      <Cell title="确认密码">
        <Input
          clearable
          type="password"
          placeholder="请输入确认密码"
          {
    
    ...getFieldProps('confirmPass', {
    
     rules: [{
    
     required: true }] })}
        />
      </Cell>
      <Button theme="primary" onClick={
    
    confirm}>
      提交
    </Button>
    </div>
    
    </div>
  )
}
export default createForm()(ModifyPassword)

效果如下

说明

createForm

通过 createForm()(ModifyPassword) 使得组件 Form 的 props 上挂载了一个 form 对象，并且这个 props.form 对象有 getFieldProps 、 validateFields 等方法，如下图（打印props.form）

getFieldProps

  <input {
    
    ...getFieldProps(name, option)} />

name:string（input的唯一name）
option：object

<form>
  <input  {
    
    ...getFieldProps('oldPass', {
    
     rules: [{
    
     required: true }] })} />//required：true此项为必填项
</form>

validateFields

通过字段名验证（error）并且获取字段值（value.name）

const confirm=async ()=>{
    
    
        //字段验证
        props.form.validateFields((error,value)=>{
    
    
            if(!error){
    
    //字段验证通过
                if (value.newPass !=value.confirmPass) {
    
    
                    Toast.show('新密码输入不一致');
                    return
                  }
                   Toast.show("修改成功")                                                                                                                                                                  
            }else{
    
    
              Toast.show("请填写完整信息")
            }
        })
        
    }

参考文章：https://www.jianshu.com/p/f3bdc2492d52