React 中from 表單提交，自動化校正

簡介：基於react.js+es6+antd(螞蟻金服ui)，但是這個表單只用到了前兩個，實現自動化驗證，對於需要驗證的選項可配置，該文對密碼和留言功能做了2級驗證，其他只做了一級驗證，驗證提示使用了antd中的Model方法。

效果圖

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.提交後台表單資料