簡介：基於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.提交後臺表單資料