import React from 'react'; import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button } from 'antd'; import "./group.less"; const FormItem = Form.Item; const Option = Select.Option; const Group = Form.create()(React.createClass({ getInitialState() { return { passwordDirty: false, }; }, handleSubmit(e) { e.preventDefault(); this.props.form.validateFieldsAndScroll((err, values) => { if (!err) { console.log('Received values of form: ', values); } }); }, handlePasswordBlur(e) { const value = e.target.value; this.setState({ passwordDirty: this.state.passwordDirty || !!value }); }, checkPassowrd(rule, value, callback) { const form = this.props.form; if (value && value !== form.getFieldValue('password')) { callback('两次密码输入必须相同!'); } else { callback(); } }, checkPhone(rule, value, callback){ const form = this.props.form; if ( !(/^1[34578]\d{9}$/.test(value))) { callback('请输入正确的手机号码!'); } else { callback(); } }, checkConfirm(rule, value, callback) { const form = this.props.form; if ( value.length < 6) { callback('密码长度必须大于或者等于6位!'); }; if (value && this.state.passwordDirty) { form.validateFields(['confirm'], { force: true }); } callback(); }, render() { const { getFieldDecorator } = this.props.form; const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 }, }; const tailFormItemLayout = { wrapperCol: { span: 14, offset: 6, }, }; return (
建议字母、数字和符号两种以上组合,6-20个字符} hasFeedback > {getFieldDecorator('password', { rules: [{ required: true, message: '请输入密码!', }, { validator: this.checkConfirm, }], })( )} 请再次输入密码} hasFeedback > {getFieldDecorator('confirm', { rules: [{ required: true, message: '请再次输入密码!', }, { validator: this.checkPassowrd, }], })( )} 请输入正确的手机号码} > {getFieldDecorator('phone', { rules: [{ required: true, message: '请输入手机号码!' },{ validator: this.checkPhone, }], })( )} 看不清?点击图片更换验证码} > {getFieldDecorator('captcha', { rules: [{ required: true, message: '请输入图片中的验证码' }], })( )} 点击获取后我们将发送验证码到上面手机号} > {getFieldDecorator('phonecaptcha', { rules: [{ required: true, message: '请输入手机获取到的验证码' }], })( )} 请填写工商局注册的全称} > {getFieldDecorator('company', { rules: [{ required: true, message: '请填写公司全称!' }], })( )} {getFieldDecorator('user', { rules: [{ required: true, message: '请输入联系人姓名!' }], })( )} {getFieldDecorator('agreement', { valuePropName: 'checked', })( 同意 阿凡提会员服务协议条款 )}
); }, })); export default Group;