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