React 中from 表单提交，自动化校验

简介：基于react.js+es6+antd(蚂蚁金服ui)，但是这个表单只用到了前两个，实现自动化验证，对于需要验证的选项可配置，该文对密码和留言功能做了2级验证，其他只做了一级验证，验证提示使用了antd中的Model方法。

1. 效果图
   

2.代码

import React from 'react';
import '../css/studyForm.less';
import {Modal} from 'antd';


const checkbox=[];
class StudyForm extends React.Component{
    constructor(props){
        super(props);
        this.state={
            username:'',
            password:'',
            radios:'',
            checkboxs:[],
            message:''
        };

        // this.handleChange = this.handleChange.bind(this);
    };
    query = {
        username:{
            value:'',
            validata:[
                {
                    errMessage:'用户名必须填写',
                    test:(value) => {
                        return value;
                    }
                }
            ]
        },
        password:{
            value:'',
            validata:[
                {
                    errMessage:'密码必须填写',
                    test:(value) => {
                        return value;
                    }
                },
                {
                    errMessage:'密码长度最为6',
                    test:(value) => {
                        return value.length == 6;
                    }
                }
            ]
        },
        radios:{
            value:'',
            validata:[
                {
                    errMessage:'专业种类必须选择一项',
                    test:(value) => {
                        return value;
                    }
                }
            ]
        },
        checkboxs:{
            value:'',
            validata:[
                {
                    errMessage:'业界人士必须选择一项',
                    test:(value) => {
                        return  value;
                    }
                }
            ]
        },
        message:{
            value:'',
            validata:[
                {
                    errMessage:'请写一下留言',
                    test:(value) => {
                        return value;
                    }
                },
                {
                    errMessage:'大方一点，来个10个字以上的',
                    test:(value) => {
                        return value.length > 10;
                    }
                }
            ]
        }
    };
    errWoring =(text) => {
        Modal.warning({
            title:text
        });
    }

    /**
     * 可以复用的代码
     */
    //针对checkbox的取消选择
    getIndex = (val,array) => {
        for(let i=0;i<array.length;i++){
            if(array[i] == val){
                return this.removeItem(i,array);
            }
        }
    }
    removeItem = (c,array) =>{
        for(let i=0;i<array.length;i++){
            if(c==i){
                array.splice(c,1);
                return array;
            }
        }

    }
    handleChange =(name,event) => {
        var newState = {};
        // console.log(name,event.target);
        // event.target.checked?newState[name] = event.target.checked:newState[name] = event.target.value;
        if(name == 'checkboxs'){
            if(event.target.checked){
                checkbox.push(event.target.value);
                newState[name] = checkbox;
            }else{
                let newArray=[];
                console.log(this.getIndex(event.target.value,checkbox));
                for(let i=0;i<checkbox.length;i++){
                    newArray.push(checkbox[i]);
                }
                newState[name] = newArray;
            }
        }else{
            newState[name] = event.target.value;
        }

        // console.log(newState);
        this.setState(newState);
        for(let key in this.query){
            if(key == name){
                this.query[key].value = event.target.value;
            }
        }
    };
    valiForm =() => {
        for(let key in this.query){
            // console.log(this.query[key]);
            let item = this.query[key];
            let valiItem = item.validata;
            if(valiItem !== undefined){
                for(let k in valiItem){
                    let valis = valiItem[k];
                    if(!valis.test(item.value)){
                        this.errWoring(valis.errMessage);
                        return false;
                    }
                }
            }
        }
        return true; 
    }  
    submitFun =() => {
        //提交前先前端验证
        // this.valiForm();
        // alert(this.valiForm())
        if(this.valiForm() !== true){
            return false;
        }
        console.log(this.state)
        // alert('提交了');
    // console.log(this.username.value);
    };
    render(){
        return (
            <div>
                 {/* <form action=""> */}
                    <div className="form-group">
                        <label htmlFor="username">用户名：</label>
                        <input type="text" id="username" name="username" value={this.state.username} onChange={this.handleChange.bind(this,'username')}/>
                    </div>
                    <div className="form-group">
                        <label htmlFor="password">密码：</label>
                        <input type="password" id="password" name="password" value={this.state.password} onChange={this.handleChange.bind(this,'password')}/>
                    </div>
                    <div className="form-group">
                        <label htmlFor="code_type">码种：</label>
                        <input type="radio" name="radios" value='JAVASCRIPT' onChange={this.handleChange.bind(this,'radios')}/>JAVASCRIPT
                        <input type="radio" name="radios" value='JAVA' onChange={this.handleChange.bind(this,'radios')}/>JAVA
                        <input type="radio" name="radios" value='PHP' onChange={this.handleChange.bind(this,'radios')}/>PHP
                        <input type="radio" name="radios" value='GO' onChange={this.handleChange.bind(this,'radios')}/>GO
                        <input type="radio" name="radios" value='PYTHON' onChange={this.handleChange.bind(this,'radios')}/>PYTHON
                    </div>
                    <div className="form-group">
                        <label htmlFor="senior">业界资深人士：</label>
                        <input type="checkbox" name="checkbox1" value="阮一峰" onChange={this.handleChange.bind(this,'checkboxs')}/>阮一峰   
                        <input type="checkbox" name="checkbox2" value="大漠穷秋" onChange={this.handleChange.bind(this,'checkboxs')}/>大漠穷秋
                        <input type="checkbox" name="checkbox3" value="陌陌" onChange={this.handleChange.bind(this,'checkboxs')}/>陌陌  
                        <input type="checkbox" name="checkbox4" value="李炎恢" onChange={this.handleChange.bind(this,'checkboxs')}/>李炎恢
                    </div>
                    <div className="form-group">
                        <label htmlFor="message">对业界资深人士留言：</label>
                        <textarea name="" id="message" cols="100" rows="10" value={this.state.message} onChange={this.handleChange.bind(this,'message')}></textarea>
                    </div>
                    <div className="form-group">
                        <label htmlFor="select_group">日期：</label>
                        <select name="select_group">
                            <option>请选择</option>
                            <option>2017</option>
                            <option>2018</option>
                            <option>2019</option>
                            <option>2020</option>
                        </select>
                    </div>
                    <p><button type="primary" onClick={this.submitFun}>提交</button></p> 
                {/* </form>  */}
            </div>
        );
    }
};
export default StudyForm;

3.提交后台表单数据