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);