https://github.com/react-component/form#option-object
https://github.com/yiminghe/async-validator/
import { createForm } from 'rc-form';
class _Test extends React.Component {
constructor(props){
super(props);
this.state={
errname:false,
errrealName :false,
};
}
realStoreNameValfunc=(rule,value,callback)=>{//验证商店名字
let errors = [];
if(value !==''){
this.setState({
errname:false
})
}else{
/**设置错误信息 并显示错误提示 */
errors.push(
new Error('请填写店名'));
this.setState({
errname:true
})
}
callback(errors);
};
realnameValfunc=(rule,value,callback)=>{//验证姓名
let errors = [];
let reg = /^[\u4e00-\u9fa5]{2,6}$/;
if(value&&(value.match(reg))){
this.setState({
errrealName:false
})
}else{
/**设置错误信息 并显示错误提示 */
errors.push(
new Error('请填写真实姓名11'));
this.setState({
errrealName:true
})
}
callback(errors);
};
verificate=()=>{
let _this = this;
this.props.form.validateFields((err, values) => {
if(!err){
console.log(values);
}else{
alert('您填写的有错误');
for(let erritem in err){
let errtext = 'err'+erritem;
_this.setState({
[errtext]: true
})
}
}
})
};
defaultGetValueFromEvent =(e)=> {
if (!e || !e.target) {
return e;
}
const { target } = e;
return target.type === 'checkbox' ? target.checked : target.value;
};
getProps=(getFieldProps,getFieldError,name,initial,ph,require,func,disabled=false,hidden=false)=>{
/** 设置input 初始值 及验证规则 */
return {
...getFieldProps(name,{
rules: [{ required: require ,max:5,message:'??'},{validator:func}],
//初始值
initialValue:initial,
//在验证或获取字段时忽略当前字段
hidden:hidden,
//(这个值是e.target.value中的‘value’,多选取值方式是e.target.checked ,这里就该填‘checked’)
valuePropName:'value',
//有点像onChange,区别是首次加载也会返回值,并且每次改变值都会把整个表单中的所有值分次输出
// getValueProps:(value)=>{console.log(value);},
//此方法提供如何从event中获取值,defaultGetValueFromEvent这是默认的可以不填
getValueFromEvent:this.defaultGetValueFromEvent,
//没太搞明白返回的是啥(all是表单所有单项的值其他俩怪怪的),而且设置了这个属性之后getValueProps的返回值会变成undefined
// normalize:(value,prev,all)=>{console.log(`${value}...${prev}`);console.log(all);},
//在何时获取子节点,默认是onChange,我改成onClick输入就无效
// trigger:'onChange',
//这属性蛮有用的,设置校验时机,'onClick'在点击时校验,'falsy'在validateFields时才校验,也可以用数组['onClick','onChange']
validateTrigger:['onClick','onChange'],
//当某一规则校验不通过时,是否停止剩下的规则的校验
validateFirst:true,
//validate这个东西看起来像option又重新包了一层,主要是结合下面两个方法对单独某个事件设置规则
// validate:[{
// trigger: 'onChange',
// rules: [{required: true ,max:5}],
// }],
// validate[n].trigger
// validate[n].rules
}),
placeholder:ph,
disabled:disabled,
}
};
render(){
const { getFieldProps,getFieldError } = this.props.form;
return (
<div>
<div>
<input type='text' {...this.getProps(getFieldProps,getFieldError,'name',
'','请填写',true,this.realStoreNameValfunc)}/>
</div>
<div>
<input type='text' {...this.getProps(getFieldProps,getFieldError,'realName',
'','请填写',true,this.realnameValfunc)}/>
</div>
<div style={{textAlign:'center'}}>
<button onClick={this.verificate}>提交</button>
</div>
</div>
)
}
}
const Test = createForm()(_Test);
export default Test