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处理不了的情况