今日份学习及问题总结
2021/1/13 from gxc
class FormTest extends Component{
constructor(props){
super(props);
}
Submit = (e) =>{
e.preventDefault();
console.log('submit')
this.props.form.validateFields((err, value) => {
// console.log('Form Value', value)
// console.log('111')
// if (!err) {
// console.log('Received values of form: ', value);
// }
console.log('err',err)
})
}
validatePassword = (rule, value, callback) => {
const { form } = this.props;
if (value && this.state.confirmDirty) {
form.validateFields(['confirm'], { force: true });
}
callback();
};
render(){
const { getFieldDecorator } = this.props.form
return(
<Form onSubmit={ this.Submit }>
<Form.Item label="账号">
{
getFieldDecorator('ID',{
rules: [
{
required: true,
message: '请输入账号'
}
]
})(
<Input placeholder="请输入账号" />
)
}
</Form.Item>
<Form.Item label="密码">
{
getFieldDecorator('passWord',{
rules: [
{
required: true,
message: '请输入密码'
},
// {
// validator: this.validatePassword
// }
{
pattern: /^[a-z]+[a-z0-9|_]*[a-z0-9]+$/,
message:'账户名,由小写字母、数字和下划线组成,且由小写字母开头。'
}
]
})(
<Input type="password" />
)
}
</Form.Item>
{/* 自定义校验 */}
<Form.Item label="自定义校验">
{
getFieldDecorator('validator',{
rules:[
{
validator: (rule, value, callback)=>{
console.log('rules',rule,'value',value)
if(value > 1000){
callback('已输入大于1000')
}
}
}
]
})(
<Input placeholder="自定义校验" type='number'></Input>
)
}
</Form.Item>
<Form.Item>
<Button htmlType="submit" type="primary">确认</Button>
</Form.Item>
</Form>
)
}
}
const FormTestShow = Form.create({ name: 'FormShow' })(FormTest)
export default class Demo extends Component {
constructor(props){
super(props);
}
render(){
return(
<div>
<FormTestShow parent={this}/>
</div>
)
}
}
以上是自定义校验学习代码,明天补一下学setState修改数组字段