当前位置: 首页 > 工具软件 > mobile > 使用案例 >

antd-mobile+rc-form处理移动端表单验证

乜裕
2023-12-01
import React, {Component} from  'react'
import { createForm, formShape } from 'rc-form';
import { InputItem } from 'antd-mobile';
class Form extends Component {
  static propTypes = {
    form: formShape,
  };
  state = {
    nameErr: true
  };
  submit = () => {
    this.props.form.validateFields((error, value) => {
      console.log(error);
      if(error){
        React.$Toast.info('必填项参数不能为空');
      }
    });
  }
  validatorAccount = (rule, value, callback) => {
    callback(new Error('错误提示!'))
  }
  componentDidMount(){
    //设置默认值
    this.props.form.setFieldsValue({name:3333})
  }
  render() {
    let errors;
    const { getFieldProps, getFieldError } = this.props.form;
    return (
      <div>
        <InputItem
          name="account"
          clear
          {
          ...getFieldProps('account', {
            rules: [{ "validator": this.validatorAccount },{required: true, message:'请输入'}]
          })
          }
          error = { !!getFieldError('account')}
          placeholder="手机号/邮箱/会员名"
        >
        </InputItem>
        <button onClick={this.submit}>保存</button>
      </div>
    );
  }
}

export default createForm()(Form);

 

 类似资料: