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

来源：互联网发布：手机淘宝怎么上传宝贝编辑：程序博客网时间：2024/05/29 11:34

简介：基于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.提交后台表单数据
这里写图片描述

阅读全文

0 0