react 下的表单验证组件Formsy

github上有比较详细的介绍点击打开链接，这里只是记录下

基本格式就是这样，现有的一般不会直接submit，onValidSubmit－－校验成功的处理 onInvalidSubmit－－校验失败的处理，这里我觉得基本的比如自定义的正则，长度，required，email都可以，如果是需要后台做判别重复的，就和上一个jquery的validation一样，处理的不好，这里就是自己写input，不用MyInput去处理，看电子邮箱那里，还是用onInput去处理了（别人的代码，其实如果只是处理email格式，MyInput是可以用valitions="isEmail"来处理的
）

{typeof window !== 'undefined' && (
            <Formsy.Form name='T_fea0'  ref="form" onValidSubmit={this.submitOk} onInvalidSubmit={this.submitFalse}>
                <div name='T_6cb1'  className="clearfix line">
                    <div name='T_1e48'  className="inputs">
                        <MyInput
                                required
                                value={this.state.authInfo.fullName ? this.state.authInfo.fullName : ''}
                        name="fullName"
                        maxLength="100"
                        title="企业全称："
                        />
                    </div>
                </div>
                <div name='T_778f'  className="clearfix line">
                    <div name='T_9c61'  className="inputs">
                        <MyInput
                                required
                                value={this.state.authInfo.locationCountryName ? this.state.authInfo.locationCountryName + '(' + this.state.authInfo.locationCountryCode + ')' : ''}
                        readonly
                        ref="locationCountryCode"
                        name="locationCountryCode"
                        title="所在地："
                        id="country"
                        />
                    </div>
                </div>
                <div name='T_80d7'  className="clearfix line" style={{ display: this.state.countryCode || this.state.authInfo.locationCountryCode ? 'block' : 'none' }}>
                <div name='T_92c7'  className="inputs not-required">
                    <MyInput required value={this.state.authInfo.locationCityName ? this.state.authInfo.locationCityName : ''} readonly ref="locationCityCode" name="locationCityCode" id="city" />
                </div>
        </div>
        <div name='T_8bdb'  className="clearfix line">
            <div name='T_5549'  className="inputs">
                <MyInput
                        required
                        value={this.state.authInfo.residence ? this.state.authInfo.residence : ''}
                maxLength="30"
                name="residence"
                title="住所："
                />
            </div>
        </div>
        <div name='T_f410'  className="clearfix line">
            <div name='T_d110'  className="inputs">
                <div name='T_7bb7'  className={this.state.emailError ? 'form-group error' : 'form-group'}>
                <label name='T_1e57'  for="email" className="required">
                    电子邮箱：
                </label>
                <input name='T_fb82'  type="text" value={this.state.email || this.state.authInfo.email} onInput={this.validEmail} maxLength="30" />
                <span name='T_5958'  className="validation-error" style={{ display: this.state.emailError ? 'block' : 'none' }}>
                {this.state.emailErrorTxt}
                </span>
            </div>
        </div>
    </div>
    <div name='T_c67b'  className="clearfix line">
        <div name='T_5666'  className="inputs">
            <MyInput
                    required
                    value={this.state.authInfo.telNo ? this.state.authInfo.telNo : ''}
            name="telNo"
            maxLength="30"
            validations={{ matchRegexp: /^([\d\s\-\+\(\)]+)+$/ }}
            validationError="请输入数字、空格和符号()-+"
            title="公司电话："
            />
        </div>
    </div>
    <div name='T_e3df'  className="clearfix line">
        <div name='T_ab97'  className="inputs not-required">
            <MyInput value={this.state.authInfo.webUrl ? this.state.authInfo.webUrl : ''} name="webUrl" maxLength="140" validations={{ maxLength: 140 }} validationError="最长输入140个字符" title="网址：" />
        </div>
    </div>
    <hr name='T_b5b0'  />
    <div name='T_f3b7'  className="clearfix line">
        <div name='T_a036'  className="inputs word-wrap">
            <MyInput
                    required
                    value={this.state.authInfo.taxCode ? this.state.authInfo.taxCode : ''}
            name="taxCode"
            maxLength="30"
            validations={{ matchRegexp: /^[\w\-]+$/ }}
            validationError="请输入大小写英文、数字和符号“-”、“_”"
            title="统一社会信用代码(税号)："
            />
        </div>
    </div>
    <div name='T_6570'  className="clearfix line">
        <div name='T_47ef'  className="inputs">
            <MyInput
                    required
                    value={this.state.authInfo.legalPerson ? this.state.authInfo.legalPerson : ''}
            name="legalPerson"
            maxLength="30"
            title="法人代表："
            />
        </div>
    </div>
    <div name='T_7ace'  className="clearfix line">
        <div name='T_bb41'  className="inputs">
            <div name='T_2697'  className="form-group">
                <label name='T_21a2'  for="license" className="required">
                    营业执照：
                </label>
                <div name='T_80ce'  id="m-upload-more" className="m-upload m-upload-multiple clearfix">
                    <div name='T_ff03'  className="upload-img-box clearfix" />
                    <div name='T_52c9'  className="upload-btn-box">
                        <input name='T_bbb3'  multiple="multiple" type="file" accept="image/jpeg,image/png,image/bmp,image/tiff,application/pdf" className="upload-input-file" />
                    </div>
                </div>
                <span name='T_013c'  style={{ color: this.state.imgError ? '#eb4b51' : '#999999' }}>{this.state.imgErrorTxt}</span>
            </div>
        </div>
    </div>
    <hr name='T_0921'  />
    <div name='T_99b9'  className="clearfix line">
        <div name='T_c4f5'  className="inputs not-required">
            <MyInput
                    value={this.state.authInfo.depositBank ? this.state.authInfo.depositBank : ''}
            name="depositBank"
            maxLength="30"
            title="开户银行："
            placeholder="XX银行XX支行（分行）"
            />
        </div>
    </div>
    <div name='T_dcf6'  className="clearfix line">
        <div name='T_560a'  className="inputs not-required">
            <MyInput
                    value={this.state.authInfo.bankAccountNo ? this.state.authInfo.bankAccountNo : ''}
            name="bankAccountNo"
            maxLength="30"
            validations={{ matchRegexp: /^[a-zA-Z0-9]+$/ }}
            validationErrors={{ matchRegexp: '请输入字母或数字' }}
            title="银行账号："
            />
        </div>
    </div>
    <div name='T_7eb8'  className="clearfix line">
        <div name='T_83e3'  className="inputs">
            <MyInput
                    required
                    value={this.state.authInfo.currencyName ? this.state.authInfo.currencyName + '(' + this.state.authInfo.tradingCurrency + ')' : ''}
            ref="tradingCurrency"
            name="tradingCurrency"
            title="交易币种："
            id="currency"
            />
        </div>
    </div>
    <div name='T_f006'  className="clearfix line">
        <div name='T_3998'  className="inputs">
            <MyInput required value={this.state.authInfo.settlementName ? this.state.authInfo.settlementName : ''} ref="refSettlementId" name="refSettlementId" title="结算方式：" id="clearing" />
            <span name='T_63dc'  className="inputs-tip">需要您和我方沟通确认具体的结算方式</span>
        </div>
    </div>
    {/* <div name='T_95c5'  className="clearfix line">
    <div name='T_b3f7'  className="inputs">
        <MyInput required value={this.state.authInfo.businessTypeValue ? this.state.authInfo.businessTypeValue.replace(/\,/g, '/') : ''} ref="businessType" name="businessType" title="业务类型：" id="business" />
        <span name='T_a34d'  className="inputs-tip">选项为您可能用到的业务类型，可多选</span>
    </div>
</div> */}
    <div name='T_de94'  className="clearfix line">
        <div name='T_eae3'  className="inputs not-required">
            <div name='T_dcb5'  className="form-group">
                <label name='T_796d'  for="mainBusiness">主营业务：</label>
                <InputComponent type="textarea" value={this.state.authInfo.mainBusiness ? this.state.authInfo.mainBusiness : ''} rows="4" cols="40" maxLength="140" handleText={this.showResult} name="mainBusiness" />
            </div>
        </div>
    </div>
    <div name='T_a0df'  className="clearfix submit">
        <button name='T_7529'  type="submit">提交信息</button>
    </div>
    </Formsy.Form>
    )}

email的处理

validEmail: function(e) {
    var value = e.target.value;
    if (value === '') {
        this.setState({ emailError: false });
        this.setState({ email: value });
        return;
    }
    var _this = this;
    this.setState({ email: value });
    if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)) {
        this.setState({ emailError: true, emailErrorTxt: '电子邮箱格式不正确' });
        return;
    } else {
        ent_authService.checkEmail({ email: value }, function(res) {
            if (res.errorCode !== 0) {
                _this.setState({
                    emailError: true,
                    emailErrorTxt: '电子邮箱已存在'
                });
            } else {
                _this.setState({ emailError: false });
            }
        });
    }
},

这里的 onValidSubmit也是要特别再处理MyInput处理不了的情况