rcform

 

react-component/form

https://github.com/react-component/form#option-object

 

yiminghe/async-validator

https://github.com/yiminghe/async-validator/

import { createForm } from 'rc-form';

class _Test extends React.Component {
    constructor(props){
        super(props);
        this.state={
            errname:false,
            errrealName :false,
        };
    }

    realStoreNameValfunc=(rule,value,callback)=>{//驗證商店名字
        let errors = [];
        if(value !==''){
            this.setState({
                errname:false
            })
        }else{
            /**設置錯誤信息 並顯示錯誤提示 */
            errors.push(
                new Error('請填寫店名'));
            this.setState({
                errname:true
            })
        }
        callback(errors);
    };

    realnameValfunc=(rule,value,callback)=>{//驗證姓名
        let errors = [];
        let reg = /^[\u4e00-\u9fa5]{2,6}$/;
        if(value&&(value.match(reg))){
            this.setState({
                errrealName:false
            })
        }else{
            /**設置錯誤信息 並顯示錯誤提示 */
            errors.push(
                new Error('請填寫真實姓名11'));
            this.setState({
                errrealName:true
            })
        }
        callback(errors);
    };

    verificate=()=>{
        let _this = this;
        this.props.form.validateFields((err, values) => {
            if(!err){
                console.log(values);
            }else{
                alert('您填寫的有錯誤');
                for(let erritem in err){
                    let errtext = 'err'+erritem;
                    _this.setState({
                        [errtext]: true
                    })
                }
            }
        })
    };

    defaultGetValueFromEvent =(e)=> {
        if (!e || !e.target) {
            return e;
        }
        const { target } = e;
        return target.type === 'checkbox' ? target.checked : target.value;
    };

    getProps=(getFieldProps,getFieldError,name,initial,ph,require,func,disabled=false,hidden=false)=>{
        /** 設置input 初始值 及驗證規則 */
        return {
            ...getFieldProps(name,{
                rules: [{ required: require ,max:5,message:'??'},{validator:func}],
                //初始值
                initialValue:initial,
                //在驗證或獲取字段時忽略當前字段
                hidden:hidden,

                //(這個值是e.target.value中的‘value’,多選取值方式是e.target.checked ,這裏就該填‘checked’)
                valuePropName:'value',
                //有點像onChange,區別是首次加載也會返回值，並且每次改變值都會把整個表單中的所有值分次輸出
                // getValueProps:(value)=>{console.log(value);},
                //此方法提供如何從event中獲取值，defaultGetValueFromEvent這是默認的可以不填
                getValueFromEvent:this.defaultGetValueFromEvent,
                //沒太搞明白返回的是啥(all是表單所有單項的值其他倆怪怪的)，而且設置了這個屬性之後getValueProps的返回值會變成undefined
                // normalize:(value,prev,all)=>{console.log(`${value}...${prev}`);console.log(all);},
                //在何時獲取子節點，默認是onChange,我改成onClick輸入就無效
                // trigger:'onChange',
                //這屬性蠻有用的，設置校驗時機，'onClick'在點擊時校驗,'falsy'在validateFields時才校驗，也可以用數組['onClick','onChange']
                validateTrigger:['onClick','onChange'],
                //當某一規則校驗不通過時，是否停止剩下的規則的校驗
                validateFirst:true,
                //validate這個東西看起來像option又重新包了一層，主要是結合下面兩個方法對單獨某個事件設置規則
                // validate:[{
                //     trigger: 'onChange',
                //     rules: [{required: true ,max:5}],
                // }],
                // validate[n].trigger
                // validate[n].rules
            }),
            placeholder:ph,
            disabled:disabled,
        }
    };

    render(){
        const { getFieldProps,getFieldError } = this.props.form;
        return (
            <div>
                <div>
                    <input type='text' {...this.getProps(getFieldProps,getFieldError,'name',
                                    '','請填寫',true,this.realStoreNameValfunc)}/>
                </div>
                <div>
                    <input type='text' {...this.getProps(getFieldProps,getFieldError,'realName',
                        '','請填寫',true,this.realnameValfunc)}/>
                </div>
                <div style={{textAlign:'center'}}>
                    <button onClick={this.verificate}>提交</button>
                </div>
            </div>
        )
    }
}

const Test = createForm()(_Test);
export default Test