React使用Ant Design Mobile结合rc-form进行表单验证

rc-form是什么：

在使用Ant Design Mobile的InputItem文本输入时提示"受控组件建议使用rc-form"，那么这个rc-from究竟是什么呢？

答：rc-form是一个将输入框变为受控组件的库，也是一个React的高阶form组件。它集合了对于输入框的各种方法，可以使我们方便的控制输入框的状态。

使用方法：

import { createForm } from 'rc-form';
.....
export default createForm()(CountSet);

首先安装并导入rc-form库引入createForm方法，然后使用createForm()在组件'CountSet'上挂载form对象，即在当前组件的props上挂在了form，通过使用props.form.相关方法，即可调用rc-form中定义的方法。

API:

validateFields( [fieldNames: string[]],[options: object],callback(errors, values)) => void    校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件。

getFieldsValue( [fieldNames: string[]] )  获取一组控件的值，若 fieldNames 参数为空，则获取全部组件。

getFieldsError( [names: string[]] )  获取一组输入控件的 Error ，如不传入参数，则获取全部组件的 Error。

getFieldProps( name,options )  用于为控件绑定名称(key)，及控件的一些默认配置。其中options参数简单说两个  initialValue和 rules，initialValue是控件的默认初始值绑定在name上；rules是对输入框的内容做一些限制，比如是否必须输入(require)，最大(max)最小(min)长度等,也可以自定义限制(validator：function(rule, value, callback))。

 

一个例子：

import React, { useEffect ,useContext, useState} from 'react';
import {Icon,List,InputItem,Button,Toast} from 'antd-mobile';
import { createForm } from 'rc-form';

const CountSet = (props)=>{

    const { getFieldProps, getFieldError } = props.form;
    const [password,setPassword] = useState('');

    const onSubmit = ()=>{
        props.form.validateFields({ force: true }, (error) => {
            if (!error) {
              console.log(props.form.getFieldsValue());
            } else {
              console.log('Validation failed');
            }
          });
    }
    const validatePassword = (rule, value, callback) => {
        if (value && value.length >=8) {
          setPassword(value);
          callback();
        } else if(value.length===0){
          callback(new Error('请输入密码'));
        } else {
            callback(new Error('请输入至少8位密码'));
        }
      }
    const validateRePassword = (rule, value, callback) => {
        if (value && value===password) {
          callback();
        } else if(value.length===0){
          callback(new Error('请再次输入密码'));
        } else {
          callback(new Error('两次输入密码不一致'));
        }
      }
    const validateTel = (rule, value, callback) => {
        if (value && value.length===13) {
            callback();
        } else if(value.length===0){
            callback(new Error('请输入电话号码'));
        } else {
            callback(new Error('电话号码不合法'));
        }
    }
    const validateEmail = (rule,value,callback) => {
    let reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
        if(reg.test(value)){
            callback();
        }else if(value.length===0){
            callback(new Error('请输入邮箱'));
        } else {
            callback(new Error('邮箱不合法'));
        }
    }
    return(
        <form className='count-setting'>
                <List>
                    <InputItem
                        {...getFieldProps('password', {
                            rules: [
                            { validator: validatePassword },
                            ],
                        })}
                        error={!!getFieldError('password')}
                        onErrorClick={() => {
                            Toast.info(getFieldError('password'), 1);
                          }}
                        clear
                        type="password"
                        placeholder="请输入"
                        >
                        <span>用户密码</span>
                    </InputItem>
                    <InputItem
                        {...getFieldProps('repassword', {
                            rules: [
                            { validator: validateRePassword },
                            ],
                        })}
                        error={!!getFieldError('repassword')}
                        onErrorClick={() => {
                            Toast.info(getFieldError('repassword'), 1);
                          }}
                        clear
                        type="password"
                        placeholder="请输入"
                        >
                        <span>重复密码</span>
                    </InputItem>
                    <InputItem
                        {...getFieldProps('tel', {
                            rules: [
                            { validator: validateTel},
                            ],
                        })}
                        error={!!getFieldError('tel')}
                        onErrorClick={() => {
                            Toast.info(getFieldError('tel'), 1);
                          }}
                        clear
                        type="phone"
                        placeholder="请输入"
                        >
                        <span>电话号码</span>
                    </InputItem>
                    <InputItem
                        {...getFieldProps('email', {
                            rules: [
                            { validator:validateEmail},
                            ],
                        })}
                        error={!!getFieldError('email')}
                        onErrorClick={() => {
                            Toast.info(getFieldError('email'), 1);
                          }}
                        clear
                        placeholder="请输入"
                        >
                        <span>电子邮箱</span>
                    </InputItem>
                    <List.Item>
                        <Button type='primary' onClick={onSubmit}>确认</Button>
                    </List.Item>
                </List>
            </form>
    )
}

export default createForm()(CountSet);