mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 15:49:10 +08:00
4.6 KiB
4.6 KiB
表单校验
- order: 11
基本的表单校验例子。
import { Button, Form, Input } from 'antd';
const createForm = Form.create;
const FormItem = Form.Item;
function noop() {
return false;
}
class BasicDemo extends React.Component {
getValidateStatus(field) {
const { isFieldValidating, getFieldError, getFieldValue } = this.props.form;
if (isFieldValidating(field)) {
return 'validating';
} else if (!!getFieldError(field)) {
return 'error';
} else if (getFieldValue(field)) {
return 'success';
}
}
handleReset(e) {
e.preventDefault();
this.props.form.resetFields();
}
handleSubmit(e) {
e.preventDefault();
this.props.form.validateFields((errors, values) => {
if (!!errors) {
console.log('Errors in form!!!');
return;
}
console.log('Submit!!!');
console.log(values);
});
}
userExists(rule, value, callback) {
if (!value) {
callback();
} else {
setTimeout(() => {
if (value === 'JasonWood') {
callback([new Error('抱歉,该用户名已被占用。')]);
} else {
callback();
}
}, 800);
}
}
checkPass(rule, value, callback) {
const { validateFields } = this.props.form;
if (value) {
validateFields(['rePasswd']);
}
callback();
}
checkPass2(rule, value, callback) {
const { getFieldValue } = this.props.form;
if (value && value !== getFieldValue('passwd')) {
callback('两次输入密码不一致!');
} else {
callback();
}
}
render() {
const { getFieldProps, getFieldError, isFieldValidating } = this.props.form;
const nameProps = getFieldProps('name', {
rules: [
{ required: true, min: 5, message: '用户名至少为 5 个字符' },
{ validator: this.userExists },
],
});
const emailProps = getFieldProps('email', {
validate: [{
rules: [
{ required: true },
],
trigger: 'onBlur',
}, {
rules: [
{ type: 'email', message: '请输入正确的邮箱地址' },
],
trigger: ['onBlur', 'onChange'],
}]
});
const passwdProps = getFieldProps('passwd', {
rules: [
{ required: true, whitespace: true, message: '请填写密码' },
{ validator: this.checkPass.bind(this) },
],
});
const rePasswdProps = getFieldProps('rePasswd', {
rules: [{
required: true,
whitespace: true,
message: '请再次输入密码',
}, {
validator: this.checkPass2.bind(this),
}],
});
const textareaProps = getFieldProps('textarea', {
rules: [
{ required: true, message: '真的不打算写点什么吗?' },
],
});
const formItemLayout = {
labelCol: { span: 7 },
wrapperCol: { span: 12 },
};
return (
<Form horizontal form={this.props.form}>
<FormItem
{...formItemLayout}
label="用户名:"
hasFeedback
help={isFieldValidating('name') ? '校验中...' : (getFieldError('name') || []).join(', ')}>
<Input {...nameProps} placeholder="实时校验,输入 JasonWood 看看" />
</FormItem>
<FormItem
{...formItemLayout}
label="邮箱:"
hasFeedback>
<Input {...emailProps} type="email" placeholder="onBlur 与 onChange 相结合" />
</FormItem>
<FormItem
{...formItemLayout}
label="密码:"
hasFeedback>
<Input {...passwdProps} type="password" autoComplete="off"
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} />
</FormItem>
<FormItem
{...formItemLayout}
label="确认密码:"
hasFeedback>
<Input {...rePasswdProps} type="password" autoComplete="off" placeholder="两次输入密码保持一致"
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} />
</FormItem>
<FormItem
{...formItemLayout}
label="备注:">
<Input {...textareaProps} type="textarea" placeholder="随便写" id="textarea" name="textarea" />
</FormItem>
<FormItem wrapperCol={{ span: 12, offset: 7 }}>
<Button type="primary" onClick={this.handleSubmit.bind(this)}>确定</Button>
<Button type="ghost" onClick={this.handleReset.bind(this)}>重置</Button>
</FormItem>
</Form>
);
}
}
BasicDemo = createForm()(BasicDemo);
ReactDOM.render(<BasicDemo />, mountNode);