Antd mobile form validation RC form usage

The most basic use

cnpm i rc-form -S

import React, {
     Component } from 'react'
import {
     InputItem } from 'antd-mobile'
import {
     createForm } from 'rc-form'

class Login extends Component {
    
	/** 3. *  Customized verification method  * @param {Object} rule  You can get the verification object in it (getFieldProps  The first parameter of corresponds to ) * @param {String} value  Current value of input box  * @param {Function} callback  Trigger the failed callback function ( Return error message ) */
    validatorAccount = (rule, value, callback) => {
    
        callback(new Error(' Error message ！'))
    }

    render() {
    
		// 1.  Here we need to use two methods ：
		//  Method 1 ： getFieldProps ：  Set the validation mode 
		//  Method 2 ： getFieldError ：  Error handling 
        const {
     getFieldProps, getFieldError } = this.props.form;

        return (
            <div className="login">
                <div className="body">
                    <div className="login-account">
                        <InputItem
                            name="account"
                            clear
                            // 2.  Binding validation method ( The first parameter is understood as key value )
                            {
    
                            ...getFieldProps('account', {
    
                                rules: [{
     "validator": this.validatorAccount }]
                            })
                            }
                            // 3. icon  Error message  ( Add a small fork after the input box , Indicates that there is a problem with this input )
                            error={
    !!getFieldError('account')}
                            // 4. 3 Produced icon Callback function for (getFieldError Return to the verification method callback A reminder of )
                            onErrorClick={
    () => {
    
                                console.info(getFieldError('account'), 1);
                            }}
                            placeholder=" cell-phone number / mailbox / Member name "
                        >
                        </InputItem>
                    </div>
                </div>
            </div>
        )
    }
}

// 4.  There is another important thing 
export default createForm()(Login)