antd mobile 表单验证 rc-form 使用

最基本使用

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. 
     * 自定义的验证方式
     * @param {Object}   rule      可以在里面获取到验证对象(getFieldProps 的第一个参数对应)
     * @param {String}   value     输入框当前值
     * @param {Function} callback  触发失败的回调函数(返回错误信息)
     */
    validatorAccount = (rule, value, callback) => {
        callback(new Error('错误提示！'))
    }

    render() {
		// 1. 这里需要使用两个方法：
		// 方法一： getFieldProps ： 设置验证方式
		// 方法二： getFieldError ： 错误处理
        const { getFieldProps, getFieldError } = this.props.form;

        return (
            <div className="login">
                <div className="body">
                    <div className="login-account">
                        <InputItem
                            name="account"
                            clear
                            // 2. 绑定验证方法(第一个参数理解为key值)
                            {
                            ...getFieldProps('account', {
                                rules: [{ "validator": this.validatorAccount }]
                            })
                            }
                            // 3. icon 错误提示 (输入框后面添加一个小叉叉，表示该输入有问题)
                            error={!!getFieldError('account')}
                            // 4. 3产生的icon的回调函数(getFieldError返回验证方法中callback的提示信息)
                            onErrorClick={() => {
                                console.info(getFieldError('account'), 1);
                            }}
                            placeholder="手机号/邮箱/会员名"
                        >
                        </InputItem>
                    </div>
                </div>
            </div>
        )
    }
}

// 4. 还有一个比较重要的哦
export default createForm()(Login)